/**
 * CookieBanner.jsx - Simpele cookiebanner/analytics-melding
 *
 * Informeert bezoekers over het gebruik van Umami analytics.
 * Slaat voorkeur op in localStorage zodat de banner maar 1x verschijnt.
 */

import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';

const STORAGE_KEY = 'cookie-banner-dismissed';

function CookieBanner() {
  const [visible, setVisible] = useState(false);

  // Check bij laden of de banner al eerder is weggeklikt
  useEffect(() => {
    const dismissed = localStorage.getItem(STORAGE_KEY);
    if (!dismissed) {
      setVisible(true);
    }
  }, []);

  const dismiss = () => {
    localStorage.setItem(STORAGE_KEY, 'true');
    setVisible(false);
  };

  if (!visible) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 sm:p-6">
      <div className="max-w-3xl mx-auto bg-warm-900 text-warm-200 rounded-xl shadow-lg border border-warm-700 p-4 sm:p-5">
        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
          {/* Tekst */}
          <div className="flex-1 text-sm leading-relaxed">
            <p>
              Deze website gebruikt{' '}
              <a
                href="https://umami.is"
                target="_blank"
                rel="noopener noreferrer"
                className="text-coral-400 hover:text-coral-300 underline"
              >
                Umami
              </a>
              {' '}voor anonieme bezoekersstatistieken. Er worden geen cookies
              geplaatst voor tracking en er worden geen persoonsgegevens
              gedeeld met derden.{' '}
              <Link
                to="/privacy"
                className="text-coral-400 hover:text-coral-300 underline"
              >
                Meer info
              </Link>
            </p>
          </div>

          {/* Knop */}
          <button
            onClick={dismiss}
            className="flex-shrink-0 px-5 py-2 bg-coral-500 text-white text-sm font-semibold rounded-lg hover:bg-coral-600 active:bg-coral-700 transition-colors"
          >
            Begrepen
          </button>
        </div>
      </div>
    </div>
  );
}

export default CookieBanner;