import React, { useState } from 'react';
import { X } from 'lucide-react';

const CookieConsent = () => {
  const [isVisible, setIsVisible] = useState(true);

  if (!isVisible) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 shadow-lg">
      <div className="container-max py-4">
        <div className="flex flex-col md:flex-row items-start md:items-center justify-between space-y-4 md:space-y-0">
          <div className="flex-1 pr-4">
            <h3 className="font-bold text-bulls-gray mb-2">Privacy Settings</h3>
            <p className="text-sm text-gray-600 leading-relaxed">
              We use Cookies to offer a variety of services, to continuously improve them and to display advertisements based on your interests on our website, social media and partner websites. By clicking on "OK" you consent to the use of Cookies. You can view, change or revoke your Cookie settings at any time via the privacy policy page. You can find out more in the privacy policy.
            </p>
            <div className="flex space-x-2 mt-2">
              <a href="#" className="text-xs text-bulls-blue hover:underline">Privacy Policy</a>
              <a href="#" className="text-xs text-bulls-blue hover:underline">Imprint</a>
            </div>
          </div>
          
          <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
            <button 
              onClick={() => setIsVisible(false)}
              className="px-6 py-2 text-sm border border-gray-300 rounded hover:bg-gray-50 transition-colors"
            >
              More
            </button>
            <button 
              onClick={() => setIsVisible(false)}
              className="px-6 py-2 text-sm border border-gray-300 rounded hover:bg-gray-50 transition-colors"
            >
              Deny
            </button>
            <button 
              onClick={() => setIsVisible(false)}
              className="px-6 py-2 text-sm bg-bulls-gray text-white rounded hover:bg-gray-800 transition-colors"
            >
              Accept All
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CookieConsent;