import Link from "next/link";
import { AdminShell } from "@/components/admin/admin-shell";
import { AdminPanel, StatusPill } from "@/components/admin/admin-ui";

const themes = [
  { name: "Launchpad", version: "2.0", href: "/", active: process.env.MARKETING_THEME !== "neo-brut" },
  { name: "Neo Brut", version: "2.0", href: "/neo-brut", active: process.env.MARKETING_THEME === "neo-brut" }
];

export default function ThemesPage() {
  return (
    <AdminShell dark>
      <div className="mx-auto max-w-7xl space-y-6">
        <h1 className="text-3xl font-bold text-white">Themes</h1>
        <AdminPanel dark className="grid gap-6 md:grid-cols-2">
          {themes.map((theme) => (
            <div key={theme.name} className="overflow-hidden rounded-lg border border-zinc-700 bg-zinc-950">
              <div className={theme.name === "Neo Brut" ? "flex h-56 items-center justify-center bg-[#fff7bd] text-4xl font-black text-black" : "flex h-56 items-center justify-center bg-[#101025] text-4xl font-black text-white"}>
                {theme.name}
              </div>
              <div className="p-5">
                <div className="flex items-center justify-between">
                  <div>
                    <h2 className="text-xl font-bold text-white">{theme.name}</h2>
                    <p className="text-sm text-zinc-500">version {theme.version}</p>
                  </div>
                  {theme.active && <StatusPill tone="blue">Active</StatusPill>}
                </div>
                <Link className="mt-5 inline-flex w-full justify-center rounded-md border border-zinc-700 px-4 py-3 text-sm font-semibold text-blue-400" href={theme.href}>
                  Preview Theme
                </Link>
              </div>
            </div>
          ))}
        </AdminPanel>
      </div>
    </AdminShell>
  );
}