import Link from "next/link";

type PlaceholderPageProps = {
  eyebrow: string;
  title: string;
  description: string;
  items: readonly (
    | string
    | {
        label: string;
        href: string;
      }
  )[];
};

export function PlaceholderPage({
  eyebrow,
  title,
  description,
  items,
}: PlaceholderPageProps) {
  return (
    <main className="min-h-dvh bg-[#080807] px-5 py-6 text-[#f7f1e3] sm:px-8 lg:px-12">
      <div className="mx-auto flex min-h-[calc(100dvh-48px)] max-w-6xl flex-col">
        <header className="flex items-center justify-between border-b border-[#d6b56d]/20 pb-5">
          <Link
            href="/"
            className="rounded-full border border-[#d6b56d]/28 px-4 py-2 font-display text-xl outline-none transition hover:bg-[#d6b56d] hover:text-[#080807] focus-visible:ring-2 focus-visible:ring-[#d6b56d]"
          >
            fly
          </Link>
          <Link
            href="/"
            className="text-sm text-[#d6b56d] outline-none transition hover:text-[#f7f1e3] focus-visible:ring-2 focus-visible:ring-[#d6b56d]"
          >
            返回首页
          </Link>
        </header>

        <section className="grid flex-1 gap-10 py-16 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
          <div>
            <p className="font-mono text-xs uppercase text-[#d6b56d]">{eyebrow}</p>
            <h1 className="mt-5 font-display text-5xl font-medium leading-tight sm:text-7xl">
              {title}
            </h1>
            <p className="mt-7 max-w-2xl text-lg leading-9 text-[#b9ad91]">{description}</p>
          </div>

          <div className="grid gap-3">
            {items.map((item, index) => {
              const label = typeof item === "string" ? item : item.label;
              const content = (
                <div
                  key={label}
                  className="rounded-[1rem] border border-[#d6b56d]/16 bg-[#f7f1e3]/[0.035] p-5 transition hover:border-cyan-300/45 hover:bg-cyan-300/[0.06]"
                >
                  <p className="font-mono text-xs text-[#d6b56d]">
                    {String(index + 1).padStart(2, "0")}
                  </p>
                  <p className="mt-3 text-base text-[#f7f1e3]">{label}</p>
                </div>
              );

              if (typeof item === "string") {
                return content;
              }

              return (
                <Link
                  key={label}
                  href={item.href}
                  className="block outline-none focus-visible:ring-2 focus-visible:ring-cyan-300"
                >
                  {content}
                </Link>
              );
            })}
          </div>
        </section>
      </div>
    </main>
  );
}
