import { useState, useEffect } from 'react';

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

  useEffect(() => {
    if (typeof window !== 'undefined' && !localStorage.getItem('cookieAccepted')) {
      setVisible(true);
    }
  }, []);

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

  if (!visible) return null;

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-gray-900 text-white p-4 z-50 flex flex-col md:flex-row items-center justify-between">
      <span>
        Diese Website verwendet nur technisch notwendige Cookies. Mehr dazu in der&nbsp;
        <a href="/datenschutz" className="underline text-pb-turquoise">Datenschutzerklärung</a>.
      </span>
      <button
        className="mt-2 md:mt-0 bg-pb-turquoise text-white px-4 py-2 rounded"
        onClick={acceptCookies}
      >
        Verstanden
      </button>
    </div>
  );
}