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

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

  useEffect(() => {
    // Check if user has already made a choice
    const cookieConsent = localStorage.getItem('cookieConsent');
    if (!cookieConsent) {
      setIsVisible(true);
    }
  }, []);

  const handleAccept = () => {
    localStorage.setItem('cookieConsent', 'accepted');
    setIsVisible(false);
  };

  const handleReject = () => {
    localStorage.setItem('cookieConsent', 'rejected');
    setIsVisible(false);
  };

  if (!isVisible) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-40 bg-gradient-to-t from-luxury-dark via-luxury-dark to-luxury-dark border-t border-luxury-gold/30">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-5 pb-[max(1rem,env(safe-area-inset-bottom))]">
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 sm:gap-6">
          {/* Content */}
          <div className="flex-1">
            <h3 className="text-luxury-gold font-aptos font-semibold text-lg sm:text-base mb-2">
              Cookies a soukromí
            </h3>
            <p className="text-luxury-light/70 text-base sm:text-sm leading-relaxed">
              Používáme cookies k optimalizaci vašeho zážitku na našem webu. Cookies nám pomáhají lépe pochopit vaše preference a zlepšovat naše služby. Další informace najdete v našich{' '}
              <a
                href="/privacy"
                className="text-luxury-gold hover:text-yellow-300 underline transition-colors"
              >
                podmínkách ochrany osobních údajů
              </a>
              .
            </p>
          </div>

          {/* Actions */}
          <div className="flex gap-3 w-full sm:w-auto flex-col sm:flex-row">
            <button
              onClick={handleReject}
              className="min-h-11 px-4 py-2 border border-luxury-gold/50 text-luxury-gold hover:border-luxury-gold hover:bg-luxury-gold/5 rounded-lg font-aptos font-semibold transition-all duration-200 text-sm sm:text-xs whitespace-nowrap"
            >
              Odmítnout
            </button>
            <button
              onClick={handleAccept}
              className="min-h-11 px-4 py-2 bg-luxury-gold text-luxury-dark hover:bg-yellow-300 rounded-lg font-aptos font-semibold transition-all duration-200 text-sm sm:text-xs whitespace-nowrap"
            >
              Přijmout
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CookieConsent;