"use client"

import * as React from "react"
import { Button } from "@/components/ui/button"
import { motion, AnimatePresence } from "framer-motion"

const CookieConsent = () => {
    const [isVisible, setIsVisible] = React.useState(false)

    React.useEffect(() => {
        const consent = localStorage.getItem("cookie-consent")
        if (!consent) {
            setTimeout(() => setIsVisible(true), 2000)
        }
    }, [])

    const handleAccept = () => {
        localStorage.setItem("cookie-consent", "true")
        setIsVisible(false)
    }

    return (
        <AnimatePresence>
            {isVisible && (
                <motion.div
                    initial={{ y: 100, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    exit={{ y: 100, opacity: 0 }}
                    className="fixed bottom-6 left-6 right-6 md:left-auto md:right-6 md:w-[400px] bg-white shadow-2xl rounded-3xl p-6 z-[100] border border-slate-100"
                >
                    <div className="space-y-4">
                        <h4 className="font-bold text-lg">Sütik használata 🍪</h4>
                        <p className="text-sm text-slate-600 leading-relaxed">
                            Weboldalunk sütiket használ a jobb felhasználói élmény érdekében.
                            Az "Elfogadom" gombra kattintva hozzájárul ezek használatához.
                        </p>
                        <div className="flex gap-3">
                            <Button onClick={handleAccept} className="flex-1 rounded-full">
                                Elfogadom
                            </Button>
                            <Button variant="outline" onClick={() => setIsVisible(false)} className="flex-1 rounded-full">
                                Nem
                            </Button>
                        </div>
                    </div>
                </motion.div>
            )}
        </AnimatePresence>
    )
}

export default CookieConsent