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

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

  if (!isVisible) return null;

  return (
    <div className="bg-slate-600 text-white p-4 text-sm">
      <div className="section-container">
        <div className="flex items-start gap-3">
          <Info className="w-5 h-5 mt-0.5 flex-shrink-0" />
          <div className="flex-1">
            <h3 className="font-semibold mb-2">LinkedIn поважає вашу конфіденційність</h3>
            <p className="mb-4 leading-relaxed">
              LinkedIn та треті сторони використовують важливі та несуттєві файли cookie для надання, захисту, аналізу та вдосконалення наших Послуг, а також для показу відповідних оголошень (включаючи <span className="underline">професійні та оголошення про роботу</span>) на LinkedIn або поза його межами. Дізнатися більше про нашу <span className="underline">Політика щодо файлів cookie</span>.
            </p>
            <p className="mb-4">
              Виберіть «Прийняти» щоб погодитися, або «Відхилити», щоб не дозволити використовувати несуттєві файли cookie. Ви зможете оновити свій вибір у своїх <span className="underline">налаштування</span> у будь-який час.
            </p>
            <div className="flex gap-3">
              <button 
                onClick={() => setIsVisible(false)}
                className="bg-white text-slate-600 px-6 py-2 rounded font-semibold hover:bg-gray-100 transition-colors"
              >
                Прийняти
              </button>
              <button 
                onClick={() => setIsVisible(false)}
                className="border border-white text-white px-6 py-2 rounded font-semibold hover:bg-white hover:text-slate-600 transition-colors"
              >
                Відхилити
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CookieBanner;