"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.title },
  { key: "kindLabel", label: "Kind", sortable: true, render: (row: RecordRow) => <span className="chip">{row.kindLabel}</span> },
  { key: "tldr", label: "Summary", sortable: true, render: (row: RecordRow) => row.tldr },
];

export function RecordBrowser({ rows }: { rows: RecordRow[] }) {
  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">Records</h2>
      <ResultsTable
        columns={columns}
        rows={ordered}
        rowKey={(row) => row.id}
        sort={sort}
        onSort={(key) => setSort((current) => nextSort(current, key))}
      />
    </section>
  );
}