import type { Metadata } from "next";
import { RepoIcon } from "@/components/icons";
import { requireViewer } from "@/lib/auth";
import { repoOwnersFor } from "@/lib/orgs";
import { NewRepoForm } from "./form";

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

export default async function NewRepoPage({ searchParams }: PageProps<"/new">) {
  const viewer = await requireViewer("/new");
  const owners = (await repoOwnersFor(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]">
          <RepoIcon />
        </span>
        <div>
          <h1 className="text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink">Create a new repository</h1>
          <p className="mt-1 type-lead text-ink2">A repository holds all your project’s files and their revision history.</p>
        </div>
      </div>
      <NewRepoForm owners={owners} owner={owners.find((o) => o.toLowerCase() === wanted) ?? viewer.username} />
    </main>
  );
}