import * as React from "react"
 
import { useConsentGate } from "@/hooks/use-consent-gate"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
 
const FEATURES = ["analytics", "ads"] as const
 
export function ConsentModal() {
  const { allowed, request, revoke } = useConsentGate(FEATURES)
 
  return (
    <div className="space-y-4">
      {FEATURES.map((feature) => (
        <label key={feature} className="flex items-center justify-between">
          <span className="capitalize">{feature}</span>
          <Switch
            checked={allowed(feature)}
            onCheckedChange={(checked) => request(feature, checked)}
          />
        </label>
      ))}
 
      <div className="flex gap-2">
        <Button size="sm" onClick={() => FEATURES.forEach((f) => request(f))}>
          Allow all
        </Button>
        <Button
          size="sm"
          variant="outline"
          onClick={() => FEATURES.forEach((f) => revoke(f))}
        >
          Revoke all
        </Button>
      </div>
    </div>
  )
}