import * as React from "react";

export interface RowListItem {
  key: React.Key;
  label: React.ReactNode;
  value: React.ReactNode;
  subValue?: React.ReactNode;
}

export interface RowListProps {
  items: RowListItem[];
  className?: string;
}

export function RowList({ items, className }: RowListProps) {
  const classes = ["ads-rows"];
  if (className) classes.push(className);
  return (
    <dl className={classes.join(" ")}>
      {items.map((item) => (
        <div className="ads-row" key={item.key}>
          <dt>{item.label}</dt>
          <dd>
            {item.value}
            {item.subValue !== undefined && <small>{item.subValue}</small>}
          </dd>
        </div>
      ))}
    </dl>
  );
}
