"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";

export function CookieConsent() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const consent = localStorage.getItem("cookie-consent");
    if (!consent) {
      const timer = setTimeout(() => setShow(true), 3000);
      return () => clearTimeout(timer);
    }
  }, []);

  const accept = () => {
    localStorage.setItem("cookie-consent", "accepted");
    setShow(false);
  };

  const decline = () => {
    localStorage.setItem("cookie-consent", "declined");
    setShow(false);
  };

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          initial={{ y: 100, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: 100, opacity: 0 }}
          className="fixed bottom-20 left-4 right-4 md:left-6 md:right-auto md:max-w-md z-40 bg-white rounded-2xl shadow-xl border border-deep-nazar/10 p-5"
        >
          <p className="text-sm text-deep-nazar/80 mb-4">
            We use cookies to make your experience better. By continuing to visit this site you agree to our use of cookies.
          </p>
          <div className="flex gap-3">
            <button
              onClick={accept}
              className="px-5 py-2 bg-bosphorus text-white text-sm font-semibold rounded-full hover:bg-bosphorus/90 transition-colors"
            >
              Accept
            </button>
            <button
              onClick={decline}
              className="px-5 py-2 text-deep-nazar/60 text-sm font-semibold rounded-full hover:bg-deep-nazar/5 transition-colors"
            >
              Decline
            </button>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}