content-explorer/ui/components/RecordBrowser.tsx

"use client";

import { useState } from "react";
import { ResultsTable } from "@/components/ResultsTable";
import { nextSort, sortRows } from "@/lib/sort-rows";
import type { RecordRow, SortState } from "@/lib/types";

const columns = [
  {
    key: "title",
    label: "Title",
    sortable: true,
    render: (row: RecordRow) => row.href ? <a className="underline" href={row.href}>{row.title}</a> : row.title,
  },
  {
    key: "kindLabel",
    label: "Kind",
    sortable: true,
    render: (row: RecordRow) => row.kindHref
      ? <a className="chip" href={row.kindHref}>{row.kindLabel}</a>
      : <span className="chip">{row.kindLabel}</span>,
  },
  { key: "tldr", label: "Summary", sortable: true, render: (row: RecordRow) => row.tldr },
];

export function RecordBrowser({ rows, heading = "Records" }: { rows: RecordRow[]; heading?: string }) {
  const [sort, setSort] = useState<SortState | undefined>({ key: "title", dir: 1 });
  const ordered = sortRows(rows, sort, (row, key) => String(row[key as keyof RecordRow] ?? ""));
  return (
    <section id="records" aria-labelledby="records-heading" className="mx-auto max-w-7xl px-4 py-14 sm:px-6">
      <h2 id="records-heading" className="mb-6 text-2xl">{heading}</h2>
      <ResultsTable
        columns={columns}
        rows={ordered}
        rowKey={(row) => row.id}
        sort={sort}
        onSort={(key) => setSort((current) => nextSort(current, key))}
      />
    </section>
  );
}