Cookie consent dialog

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
</script>

<template>
  <div class="flex items-center justify-center">
    <Dialog>
      <DialogTrigger as-child>
        <Button variant="outline">Cookie Preferences</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Cookie Preferences</DialogTitle>
          <DialogDescription>You can enable or disable different categories of cookies.</DialogDescription>
        </DialogHeader>
        <div class="space-y-4">
          <div class="flex items-center justify-between gap-4">
            <div class="space-y-0.75">
              <Label class="text-sm font-medium">Essential Cookies</Label>
              <p class="text-muted-foreground text-xs">Required for the website to function properly. Cannot be disabled.</p>
            </div>
            <Switch :model-value="true" disabled />
          </div>
          <div class="flex items-center justify-between gap-4">
            <div class="space-y-0.75">
              <Label for="cookie-analytics" class="text-sm font-medium">Analytics Cookies</Label>
              <p class="text-muted-foreground text-xs">Help us understand how visitors interact with our website.</p>
            </div>
            <Switch id="cookie-analytics" />
          </div>
          <div class="flex items-center justify-between gap-4">
            <div class="space-y-0.75">
              <Label for="cookie-marketing" class="text-sm font-medium">Marketing Cookies</Label>
              <p class="text-muted-foreground text-xs">
                Used to deliver personalized advertisements and track ad campaign performance.
              </p>
            </div>
            <Switch id="cookie-marketing" />
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline">Save Preferences</Button>
          <Button>Accept All</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </div>
</template>