import { Link, createFileRoute } from "@tanstack/react-router";
import { PageHeader } from "@/components/archive-ui";
import { useLiveLibrary } from "@/lib/archive/live";

export const Route = createFileRoute("/scholars")({
  component: ScholarsPage,
});

function ScholarsPage() {
  const lib = useLiveLibrary();
  return (
    <div>
      <PageHeader
        kicker="Scholars"
        title="People in the catalog"
        lede="Only people named by a record already on the shelf. A missing name is not a judgment."
      />
      <ul className="border-t border-ink/10">
        {lib.persons.map((person) => (
          <li key={person.id} className="border-b border-ink/10">
            <Link to="/scholars/$personId" params={{ personId: person.id }} className="block py-4">
              <span className="flex flex-wrap items-baseline justify-between gap-3">
                <span className="text-xl">{person.name}</span>
                <span className="text-sm text-muted">{person.life}</span>
              </span>
              {person.nameAr ? (
                <span className="arabic mt-1 block" dir="rtl" lang="ar">
                  {person.nameAr}
                </span>
              ) : null}
              <span className="mt-1 block text-sm text-muted">{person.roles.join(" · ")}</span>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}