Description list

type Row = { label: string; value: React.ReactNode };

export function DescriptionList({ title, subtitle, rows, action }:
  { title: string; subtitle?: string; rows: Row[]; action?: React.ReactNode }) {
  return (
    <section className="rounded-lg border border-border bg-bg px-4 pb-1.5 pt-4">
      <header className="mb-3 flex flex-wrap items-center justify-between gap-2">
        <div>
          <h3 className="text-[15px] font-semibold tracking-tight">{title}</h3>
          {subtitle && <p className="text-[12.5px] text-fg-subtle">{subtitle}</p>}
        </div>
        {action}
      </header>
      <dl>
        {rows.map((r) => (
          <div key={r.label} className="grid grid-cols-[minmax(96px,36%)_minmax(0,1fr)] gap-x-4 gap-y-1 border-t border-border py-2.5 text-[13.5px]">
            <dt className="text-fg-muted">{r.label}</dt>
            <dd className="flex min-w-0 flex-wrap items-center gap-1.5 [overflow-wrap:anywhere]">{r.value}</dd>
          </div>
        ))}
      </dl>
    </section>
  );
}

// <DescriptionList title="Kaveri Foods" subtitle="Customer since March 2024"
//   action={<button type="button" className="h-8 rounded border border-border-strong px-2.5 text-[13px] font-medium">Edit</button>}
//   rows={[{ label: "Contact", value: "Asha Kulkarni" }, { label: "GSTIN", value: <code className="text-[12.5px]">29ABCDE1234F1Z5</code> }]} />