"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { Cookie, X } from "lucide-react";


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

  useEffect(() => {
    // Check if the user has already accepted cookies
    const consent = localStorage.getItem("airproject_cookie_consent");
    if (!consent) {
      setShowBanner(true);
    }
  }, []);

  const acceptCookies = () => {
    localStorage.setItem("airproject_cookie_consent", "true");
    setShowBanner(false);
  };

  if (!showBanner) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6 pb-safe">
      <div className="max-w-4xl mx-auto bg-slate-900 border border-slate-700 shadow-2xl rounded-2xl p-4 md:p-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 md:gap-6 animate-in slide-in-from-bottom-10 fade-in duration-500">
        <div className="flex items-start gap-4">
          <div className="bg-primary/20 p-2 md:p-3 rounded-full shrink-0 mt-1 md:mt-0 text-primary">
            <Cookie className="w-5 h-5 md:w-6 md:h-6" />
          </div>
          <div>
            <h3 className="text-white font-semibold text-sm md:text-base mb-1">
              Dbamy o Twoją prywatność
            </h3>
            <p className="text-slate-400 text-xs md:text-sm leading-relaxed max-w-2xl">
              Nasz serwis używa plików cookies (ciasteczek) w celach statystycznych (m.in. Google Analytics, Google Tag Manager) oraz prawidłowego działania strony. 
              Możesz określić warunki przechowywania cookies w swojej przeglądarce. Dowiedz się więcej w naszej{" "}
              <Link 
                href="/polityka-prywatnosci" 
                className="text-primary hover:text-white transition-colors underline underline-offset-2"
              >
                Polityce Prywatności
              </Link>.
            </p>
          </div>
        </div>
        
        <div className="flex items-center gap-3 w-full md:w-auto shrink-0 justify-end md:justify-start">
          <button 
            onClick={() => setShowBanner(false)}
            className="md:hidden btn btn-ghost btn-circle text-slate-400 hover:text-white shrink-0"
          >
            <X className="w-5 h-5" />
          </button>
          <button 
            onClick={acceptCookies}
            className="btn btn-primary text-white w-full md:w-auto shadow-md shadow-primary/20"
          >
            Rozumiem i Akceptuję
          </button>
        </div>
        
        {/* Zamknięcie na desktop */}
        <button 
          onClick={() => setShowBanner(false)}
          className="hidden md:flex absolute top-4 right-4 text-slate-500 hover:text-white transition-colors p-1"
          aria-label="Zamknij"
        >
          <X className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
}