the-tip-top-frontend/components/CookieConsent.tsx

'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';

export default function CookieConsent() {
  const [showBanner, setShowBanner] = useState(false);

  useEffect(() => {
    // Vérifier si l'utilisateur a déjà donné son consentement
    const consent = localStorage.getItem('cookieConsent');
    if (!consent) {
      setShowBanner(true);
    }
  }, []);

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

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

  if (!showBanner) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 bg-gradient-to-r from-beige-100 to-beige-50 shadow-2xl border-t-4 border-primary-500">
      <div className="container mx-auto px-4 py-6">
        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
          {/* Message */}
          <div className="flex-1 text-center md:text-left">
            <p className="text-sm md:text-base text-gray-700">
              Ce site utilise des cookies pour améliorer votre expérience de navigation et analyser notre trafic.{' '}
              <Link
                href="/cookies"
                className="text-primary-500 hover:text-primary-600 underline transition-colors font-semibold"
              >
                En savoir plus
              </Link>
            </p>
          </div>

          {/* Buttons */}
          <div className="flex gap-3 flex-shrink-0">
            <button
              onClick={handleReject}
              className="px-6 py-2.5 bg-white border-2 border-beige-300 hover:border-primary-500 text-gray-700 hover:text-primary-500 rounded-lg transition-all duration-300 text-sm font-semibold"
            >
              Refuser
            </button>
            <button
              onClick={handleAccept}
              className="px-6 py-2.5 bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-400 hover:to-primary-500 text-white rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl text-sm font-semibold"
            >
              Accepter tous les cookies
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}