import { createFileRoute } from "@tanstack/react-router";
import { DashboardLayout } from "@/components/dashboard-layout";
import { LandingThemeSelector } from "@/components/admin/landing-theme-selector";
import { requireRole } from "@/lib/auth/guards";

export const Route = createFileRoute("/appearance")({
  beforeLoad: ({ context, location }) => requireRole(context, location, "superadmin"),
  head: () => ({
    meta: [
      { title: "Appearance — VotersAlert" },
      { name: "description", content: "Customize platform appearance and landing page themes." },
    ],
  }),
  component: AppearancePage,
});

function AppearancePage() {
  return (
    <DashboardLayout>
      <div className="p-4 sm:p-6 lg:p-8 space-y-6 max-w-[1600px] mx-auto">
        <div className="mb-2">
          <h1 className="text-2xl font-semibold tracking-tight">Appearance</h1>
          <p className="text-sm text-muted-foreground">
            Customize platform visuals and default landing page themes.
          </p>
        </div>
        <LandingThemeSelector />
      </div>
    </DashboardLayout>
  );
}