import type { Metadata } from "next";
import { PeopleIcon } from "@/components/icons";
import { requireViewer } from "@/lib/auth";
import { NewOrgForm } from "./form";

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

export default async function NewOrgPage() {
  await requireViewer("/organizations/new");
  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]">
          <PeopleIcon />
        </span>
        <div>
          <h1 className="text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink">Create an organization</h1>
          <p className="mt-1 type-lead text-ink2">Repositories that belong to a team, with people you invite and the access you give them.</p>
        </div>
      </div>
      <NewOrgForm />
    </main>
  );
}