import { RecordBrowser } from "@/components/RecordBrowser";
import { PageHeader } from "@/components/PageHeader";
import type { KindView } from "@/lib/catalog";

/** Kind directory. The heading and rows come from the snapshot kind registry. */
export function KindIndex({ kind }: { kind: KindView }) {
  const count = kind.rows.length;
  const lede = count === 1 ? `1 record in ${kind.dataspaceTitle}.` : `${count} records in ${kind.dataspaceTitle}.`;
  return (
    <>
      <PageHeader kicker={kind.dataspaceTitle} title={kind.plural} lede={lede} />
      <RecordBrowser rows={kind.rows} columns={kind.columns} />
    </>
  );
}