src/components/PrLineItemsTable.tsx

import type { PrRow } from "../api/form";

type Props = {
  rows: PrRow[];
  /** Extra classes on the outer flex wrapper (e.g. flex-1 min-h-0). */
  className?: string;
};

export function PrLineItemsTable({ rows, className = "" }: Props) {
  if (!rows.length) return null;

  return (
    <div
      className={`flex min-h-0 w-full flex-1 flex-col overflow-hidden rounded-xl border border-outline-variant bg-white shadow-sm ${className}`}
    >
      <div className="shrink-0 border-b border-outline-variant bg-surface-container-high px-2 py-1.5 font-label-caps text-[8px] font-bold uppercase leading-none tracking-wide text-secondary">
        Line items
      </div>
      <div className="min-h-0 flex-1 overflow-auto">
        <table className="w-full min-w-[720px] table-fixed border-collapse text-left text-[11px] leading-snug">
          <colgroup>
            <col className="w-[7%]" />
            <col className="w-[9%]" />
            <col className="w-[24%]" />
            <col className="w-[32%]" />
            <col className="w-[8%]" />
            <col className="w-[12%]" />
          </colgroup>
          <thead className="sticky top-0 z-10">
            <tr className="border-b border-outline-variant bg-surface-container-low">
              <th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
                PR Line Item
              </th>
              <th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
                MAT GRP
              </th>
              <th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
                PR SHORT TEXT
              </th>
              <th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
                PR LONG TEXT
              </th>
              <th className="px-2 py-1.5 align-bottom text-center text-[10px] font-semibold text-primary">
                PR Quantity
              </th>
              <th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
                Delivery Date
              </th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, idx) => (
              <tr
                key={`${r.pr_line_item}-${idx}`}
                className="border-b border-outline-variant/80 align-top last:border-0"
              >
                <td className="px-2 py-1 font-data-mono text-[10px] tabular-nums whitespace-nowrap">
                  {r.pr_line_item}
                </td>
                <td className="px-2 py-1 font-data-mono text-[10px] whitespace-nowrap">
                  {r.mat_grp}
                </td>
                <td className="min-w-0 px-2 py-1 break-words text-on-background">
                  {r.pr_short_text}
                </td>
                <td className="min-w-0 px-2 py-1 break-words text-on-background">
                  {r.pr_long_text}
                </td>
                <td className="px-2 py-1 text-center tabular-nums whitespace-nowrap">
                  {r.pr_quantity}
                </td>
                <td className="min-w-0 px-2 py-1 whitespace-nowrap text-[10px] text-secondary">
                  {r.delivery_date}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}