src/components/hardware/AcceleratorPages.tsx

import * as React from "react";
import {
  DetailLink,
  DetailList,
  DetailSectionCard,
  Empty,
  LocalSystemCells,
} from "@/components/detail/DetailList";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type {
  AcceleratorPageState,
  AcceleratorRow,
  AcceleratorSystemRow,
  AcceleratorVendorSummaryRow,
} from "@/types/local-frontier";

export type AcceleratorPagesProps = {
  page: AcceleratorPageState;
};

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

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Vendor</TableHead>
          <TableHead>Accelerators</TableHead>
          <TableHead>Systems</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.vendor.href}>
            <TableCell>
              <DetailLink value={row.vendor} />
            </TableCell>
            <TableCell>{row.accelerators}</TableCell>
            <TableCell>{row.systems}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

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

  return (
    <Table className="min-w-[760px]">
      <TableHeader>
        <TableRow>
          <TableHead>Accelerator</TableHead>
          <TableHead>Vendor</TableHead>
          <TableHead>Systems</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>
              <a
                className="font-semibold text-foreground underline-offset-2 hover:underline"
                href={row.href}
              >
                {row.name}
              </a>
            </TableCell>
            <TableCell>
              <DetailLink value={row.vendor} />
            </TableCell>
            <TableCell>{row.systems}</TableCell>
            <TableCell>{row.maxMemory}</TableCell>
            <TableCell>{row.maxBandwidth}</TableCell>
            <TableCell>{row.lowestLatestPrice}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

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

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

export function AcceleratorPages({
  page,
}: AcceleratorPagesProps): 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="Vendors">
          <VendorSummaryTable rows={page.vendors} />
        </DetailSectionCard>
      ) : null}
      {page.accelerators.length || page.kind !== "model" ? (
        <DetailSectionCard title="Accelerators">
          <AcceleratorTable rows={page.accelerators} />
        </DetailSectionCard>
      ) : null}
      {page.systems.length || page.kind !== "overview" ? (
        <DetailSectionCard title="Systems">
          <AcceleratorSystemsTable rows={page.systems} />
        </DetailSectionCard>
      ) : null}
    </section>
  );
}