import { SiteHeader } from "@/components/site-header";
import { SiteFooter } from "@/components/site-footer";
import { Container } from "@/components/container";
import { Alert, AlertTitle } from "@/components/ui/alert";
import { FileWarning } from "lucide-react";

/**
 * Shared shell for every legal/support page. `draftNotice` is required and
 * always rendered — every page here ships as a reviewable starting point,
 * not finished legal copy (jurisdiction, company details, and specific
 * policy terms are business/legal decisions, not something to fabricate).
 */
export function LegalPageLayout({
  title,
  lastUpdated,
  draftNotice,
  children,
}: {
  title: string;
  lastUpdated?: string;
  draftNotice?: string;
  children: React.ReactNode;
}) {
  return (
    <>
      <SiteHeader />
      <main id="main-content" className="flex-1 py-16 sm:py-20">
        <Container className="flex flex-col gap-8">
          <div className="flex flex-col gap-2 border-b border-border pb-8">
            <h1 className="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">{title}</h1>
            {lastUpdated && <p className="text-sm text-muted-foreground">{lastUpdated}</p>}
          </div>

          {draftNotice && (
            <Alert variant="destructive" className="max-w-3xl">
              <FileWarning />
              <AlertTitle>{draftNotice}</AlertTitle>
            </Alert>
          )}

          <div className="flex max-w-3xl flex-col gap-6 text-sm leading-relaxed text-muted-foreground [&_h2]:mt-2 [&_h2]:text-lg [&_h2]:font-semibold [&_h2]:text-foreground [&_li]:leading-relaxed [&_p]:leading-relaxed [&_ul]:list-disc [&_ul]:pl-5">
            {children}
          </div>
        </Container>
      </main>
      <SiteFooter />
    </>
  );
}