src/components/hardware/SystemPages.tsx

import * as React from "react";
import {
  DetailLink,
  DetailList,
  DetailSectionCard,
  Empty,
  LocalSystemCells,
  TextList,
} from "@/components/detail/DetailList";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type {
  DetailLinkValue,
  SystemPageState,
  SystemRow,
  SystemVendorRow,
} from "@/types/local-frontier";

export type SystemPagesProps = {
  page: SystemPageState;
};

function LinkList({
  links,
}: {
  links: readonly DetailLinkValue[];
}): React.JSX.Element {
  return (
    <span className="grid gap-1">
      {links.map((link) => (
        <DetailLink key={link.href} value={link} />
      ))}
    </span>
  );
}

function SystemVendorTable({
  rows,
}: {
  rows: readonly SystemVendorRow[];
}): React.JSX.Element {
  if (!rows.length) return <Empty>No system vendors.</Empty>;

  return (
    <Table className="min-w-[900px]">
      <TableHeader>
        <TableRow>
          <TableHead>System vendor</TableHead>
          <TableHead>Systems</TableHead>
          <TableHead>Accelerator vendors</TableHead>
          <TableHead>Max memory</TableHead>
          <TableHead>Max bandwidth</TableHead>
          <TableHead>Lowest latest price</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.id}>
            <TableCell>
              <DetailLink value={row.vendor} />
            </TableCell>
            <TableCell>{row.systems}</TableCell>
            <TableCell>
              <LinkList links={row.acceleratorVendors} />
            </TableCell>
            <TableCell>{row.maxMemory}</TableCell>
            <TableCell>{row.maxBandwidth}</TableCell>
            <TableCell>{row.lowestLatestPrice}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

function SystemsTable({
  rows,
}: {
  rows: readonly SystemRow[];
}): React.JSX.Element {
  if (!rows.length) return <Empty>No systems.</Empty>;

  return (
    <Table className="min-w-[980px]">
      <TableHeader>
        <TableRow>
          <TableHead>System</TableHead>
          <TableHead>Accelerator vendor</TableHead>
          <TableHead>Accelerators</TableHead>
          <TableHead>Memory</TableHead>
          <TableHead>Bandwidth</TableHead>
          <TableHead>Latest price</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.id}>
            <LocalSystemCells
              middle={<TextList items={row.accelerators} />}
              row={row}
              vendor={row.acceleratorVendor}
            />
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

export function SystemPages({ page }: SystemPagesProps): React.JSX.Element {
  if (page.emptyMessage) return <Empty>{page.emptyMessage}</Empty>;

  return (
    <section className="grid gap-4">
      {page.summaryRows.length ? (
        <DetailSectionCard title="Summary">
          <DetailList rows={page.summaryRows} />
        </DetailSectionCard>
      ) : null}
      {page.vendors.length ? (
        <DetailSectionCard title="System Vendors">
          <SystemVendorTable rows={page.vendors} />
        </DetailSectionCard>
      ) : null}
      {page.systems.length || page.kind === "vendor" ? (
        <DetailSectionCard title="Systems">
          <SystemsTable rows={page.systems} />
        </DetailSectionCard>
      ) : null}
    </section>
  );
}