Cookie consent

import { useState } from "react"
import { CookieConsent, CookiePreferences, type CookieCategory, type CookieChoice } from "@/components/ui/cookie-consent"

const cookieCategories: CookieCategory[] = [
  { id: "necessary", label: "Necessary", description: "Keeps you signed in and remembers this choice. The site does not work without them.", required: true },
  { id: "preferences", label: "Preferences", description: "Remembers your language and theme between visits." },
  { id: "analytics", label: "Analytics", description: "Counts visits and which pages are read, without identifying you." },
  { id: "marketing", label: "Marketing", description: "Measures which campaigns bring people here." },
];

export function CookieConsentDemo() {
  const [choice, setChoice] = useState<CookieChoice | null>(null);
  const [how, setHow] = useState("");
  const [settings, setSettings] = useState(false);
  const save = (next: CookieChoice, decision: string) => {
    setChoice(next);
    setHow(decision);
  };
  const on = choice ? cookieCategories.filter((category) => choice[category.id]).map((category) => category.label) : [];
  return (
    <div className="relative grid min-h-[380px] w-full max-w-2xl content-between gap-6 overflow-hidden rounded-[14px] border border-border p-5">
      <div className="grid gap-2">
        <p className="text-sm font-semibold">Halden journal</p>
        <p className="max-w-[56ch] text-sm leading-6 text-muted-foreground">Reading continues behind the banner: it never covers the page or traps focus.</p>
        <p role="status" className="text-[13px]">
          {choice ? `Saved (${how}): ${on.join(", ")}.` : "No choice stored yet."}
        </p>
      </div>
      <div className="grid gap-3">
        <CookieConsent open={!choice} position="inline" categories={cookieCategories} onDecide={save} policyHref="#cookie-policy" />
        <footer className="flex flex-wrap items-center gap-3 border-t border-border pt-3 text-[13px] text-muted-foreground">
          <span>© 2026 Halden</span>
          <button type="button" className="underline underline-offset-2" onClick={() => setSettings(true)}>Cookie settings</button>
          {choice && <button type="button" className="underline underline-offset-2" onClick={() => setChoice(null)}>Forget my choice</button>}
        </footer>
      </div>
      <CookiePreferences open={settings} onOpenChange={setSettings} categories={cookieCategories} value={choice ?? undefined} onSave={save} policyHref="#cookie-policy" />
    </div>
  );
}