"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export default function CookieBanner() {
  const [showBanner, setShowBanner] = useState(false)

  useEffect(() => {
    // Check if user has already made a choice
    const consentState = localStorage.getItem("qv-cc-state")
    if (!consentState) {
      setShowBanner(true)
    }
  }, [])

  const handleConsent = (analytics: boolean) => {
    // Save user preference
    localStorage.setItem("qv-cc-state", JSON.stringify({ analytics }))

    // If analytics is allowed, initialize GA
    if (analytics) {
      window.dispatchEvent(new Event("consentGranted"))
    }

    setShowBanner(false)
  }

  if (!showBanner) {
    return null
  }

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6">
      <Card className="mx-auto max-w-lg shadow-lg">
        <CardHeader>
          <CardTitle>Cookiee Consent</CardTitle>
          <CardDescription>We use cookies to enhance your browsing experience and analyze our traffic.</CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">
            By clicking "Accept All", you consent to the use of performance cookies that help us improve our website.
            You can also choose "Essential Only" to decline analytics cookies.
          </p>
        </CardContent>
        <CardFooter className="flex flex-col gap-2 sm:flex-row sm:justify-end">
          <Button variant="outline" onClick={() => handleConsent(false)}>
            Essential Only
          </Button>
          <Button onClick={() => handleConsent(true)}>Accept All</Button>
        </CardFooter>
      </Card>
    </div>
  )
}
