"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { AnimatePresence, motion } from "framer-motion";
import { X } from "lucide-react";
import { useTranslations } from "@/lib/i18n/hooks";

export function CookieConsent() {
    const [isVisible, setIsVisible] = useState(false);
    const t = useTranslations('cookieConsent');

    useEffect(() => {
        // Check if user has already made a choice
        const consent = localStorage.getItem("cookie-consent");
        if (!consent) {
            // Small delay to show animation smoothly after load
            const timer = setTimeout(() => setIsVisible(true), 1000);
            return () => clearTimeout(timer);
        }
    }, []);

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

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

    return (
        <AnimatePresence>
            {isVisible && (
                <motion.div
                    initial={{ y: 100, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    exit={{ y: 100, opacity: 0 }}
                    transition={{ duration: 0.5 }}
                    className="fixed bottom-0 left-0 right-0 z-[100] p-4 md:p-6"
                >
                    <div className="mx-auto max-w-7xl">
                        <div className="relative overflow-hidden rounded-2xl bg-white/95 backdrop-blur-md p-6 shadow-2xl ring-1 ring-black/5 dark:bg-zinc-900/95 dark:ring-white/10 md:flex md:items-center md:justify-between md:gap-8">
                            <div className="relative z-10 space-y-2 md:flex-1">
                                <h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
                                    {t("title")}
                                </h3>
                                <p className="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
                                    {t("description")}
                                </p>
                            </div>
                            <div className="relative z-10 mt-6 flex flex-col gap-3 md:mt-0 md:flex-row md:items-center">
                                <Button
                                    variant="outline"
                                    onClick={handleDecline}
                                    className="rounded-full border-zinc-200 hover:bg-zinc-100 dark:border-zinc-800 dark:hover:bg-zinc-800"
                                >
                                    {t("decline")}
                                </Button>
                                <Button
                                    onClick={handleAccept}
                                    className="rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
                                >
                                    {t("accept")}
                                </Button>
                            </div>
                        </div>
                    </div>
                </motion.div>
            )}
        </AnimatePresence>
    );
}
