"use client";

import React, { useState, useEffect } from 'react';

interface CookieBannerProps {
  onAccept?: () => void;
  onDecline?: () => void;
}

export const CookieBanner: React.FC<CookieBannerProps> = ({ onAccept, onDecline }) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // Check if user has already made a choice
    const consent = localStorage.getItem('cookie-consent');
    if (!consent) {
      // Small delay for better UX
      setTimeout(() => setIsVisible(true), 1500);
    }
  }, []);

  const handleAccept = () => {
    localStorage.setItem('cookie-consent', 'accepted');
    setIsVisible(false);
    onAccept?.();
  };

  const handleDecline = () => {
    localStorage.setItem('cookie-consent', 'declined');
    setIsVisible(false);
    onDecline?.();
  };

  if (!isVisible) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6">
      <div className="max-w-4xl mx-auto bg-zsl-card/95 backdrop-blur-md border border-zsl-primary/20 rounded-2xl p-6 shadow-2xl shadow-black/50">
        <div className="flex flex-col md:flex-row items-start md:items-center gap-4">
          {/* Icon */}
          <div className="w-12 h-12 rounded-xl bg-zsl-primary/10 flex items-center justify-center shrink-0">
            <svg className="w-6 h-6 text-zsl-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
          </div>

          {/* Text */}
          <div className="flex-1">
            <h3 className="font-semibold text-white mb-1">🍪 Çerez Kullanımı & KVKK</h3>
            <p className="text-sm text-zsl-muted leading-relaxed">
              Web sitemizde deneyiminizi iyileştirmek için çerezler kullanıyoruz. 
              Kişisel verileriniz 6698 sayılı KVKK kapsamında korunmaktadır. 
              Devam ederek{' '}
              <a href="#" className="text-zsl-primary hover:underline">Gizlilik Politikamızı</a>
              {' '}kabul etmiş olursunuz.
            </p>
          </div>

          {/* Buttons */}
          <div className="flex gap-3 shrink-0 w-full md:w-auto">
            <button
              onClick={handleDecline}
              className="flex-1 md:flex-none px-5 py-2.5 text-sm font-medium text-zsl-muted border border-zsl-primary/20 rounded-lg hover:border-zsl-primary/40 hover:text-white transition-all duration-300"
            >
              Reddet
            </button>
            <button
              onClick={handleAccept}
              className="flex-1 md:flex-none px-5 py-2.5 text-sm font-medium bg-zsl-primary text-zsl-bg rounded-lg hover:bg-zsl-primary/90 transition-all duration-300"
            >
              Kabul Et
            </button>
          </div>
        </div>

        {/* Close button */}
        <button
          onClick={handleDecline}
          className="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center text-zsl-muted hover:text-white hover:bg-zsl-primary/10 transition-all duration-300"
          aria-label="Kapat"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  );
};