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

const CookieBanner = ({ onClose }) => {
  return (
    <div className="fixed bottom-4 left-4 right-4 z-50 max-w-md mx-auto">
      <div className="cookie-banner rounded-xl p-6 shadow-lg border border-gray-200">
        <div className="flex items-start justify-between mb-4">
          <h3 className="font-semibold text-gray-900">This site uses cookies</h3>
          <button 
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>
        <p className="text-sm text-gray-600 mb-4">
          We and selected third parties use cookies (or similar technologies) for technical purposes, to enhance and analyze site usage, to support our marketing efforts, and for other purposes described below.
        </p>
        <p className="text-sm text-gray-600 mb-6">
          By clicking "Accept all", you agree to the storing of cookies on your device for these purposes.
        </p>
        <div className="flex gap-3">
          <button 
            onClick={onClose}
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors text-sm font-medium"
          >
            Deny
          </button>
          <button 
            onClick={onClose}
            className="flex-1 px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors text-sm font-medium"
          >
            Accept all
          </button>
        </div>
      </div>
    </div>
  );
};

export default CookieBanner;