import { Hero } from "@/components/Hero";
import { OriginNotice } from "@/components/OriginNotice";
import { RecordBrowser } from "@/components/RecordBrowser";
import { findDataspace, listNavigation } from "@/lib/catalog";
import { notFound } from "next/navigation";

export function DataspaceHome({ id }: { id: string }) {
  const dataspace = findDataspace(id);
  if (!dataspace) notFound();
  const others = listNavigation().filter((item) => item.id !== dataspace.id);
  return (
    <>
      <Hero
        dataspace={dataspace.title}
        description={dataspace.description}
        kinds={dataspace.kinds.map((kind) => ({ href: kind.href, label: kind.plural }))}
      />
      {others.length > 0 ? (
        <p className="mx-auto max-w-7xl px-4 pt-8 text-sm text-muted sm:px-6">
          Other fields:{" "}
          {others.map((item, index) => (
            <span key={item.id}>
              {index > 0 ? ", " : null}
              <a className="underline" href={`/${item.id}/`}>{item.title}</a>
            </span>
          ))}
        </p>
      ) : null}
      <OriginNotice dataspaceId={dataspace.id} />
      <RecordBrowser rows={dataspace.rows} columns={dataspace.columns} />
    </>
  );
}