import type { Metadata } from "next";
import { createListAction } from "@/app/actions/lists";
import { BookmarkIcon } from "@/components/icons";
import { ListForm } from "@/components/list-form";
import { requireViewer } from "@/lib/auth";
import { listOwnersFor } from "@/lib/lists";

export const metadata: Metadata = { title: "New list" };

export default async function NewListPage({ searchParams }: PageProps<"/lists/new">) {
  const viewer = await requireViewer("/lists/new");
  const owners = (await listOwnersFor(viewer)).map((o) => o.username);
  const wanted = String((await searchParams).owner ?? "").toLowerCase();
  return (
    <main className="mx-auto w-full max-w-2xl px-4 py-12">
      <div className="mb-8 flex items-center gap-4">
        <span className="icon-tile size-12 shrink-0 rounded-plate [&_svg]:size-[22px]">
          <BookmarkIcon />
        </span>
        <div>
          <h1 className="text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink">Create a list</h1>
          <p className="mt-1 type-lead text-ink2">Gather repositories to find them again or share them. Add one with the Save key on its page.</p>
        </div>
      </div>
      <ListForm action={createListAction} owners={owners} owner={owners.find((o) => o.toLowerCase() === wanted) ?? viewer.username} />
    </main>
  );
}