/* Bandeau de consentement aux cookies (RGPD) */

import { useState } from 'react';
import { Link } from 'react-router-dom';
import styles from './CookieBanner.module.css';

const CONSENT_KEY = 'ds_cookies_consent';
const CONSENT_VERSION = 1;

export default function CookieBanner() {
  /* Affiché tant qu'aucune décision n'a été enregistrée */
  const [visible, setVisible] = useState(() => localStorage.getItem(CONSENT_KEY) === null);

  if (!visible) {
    return null;
  }

  /* Enregistre la décision de l'utilisateur (accept / refuse) */
  function enregistrerChoix(choice) {
    const decision = { choice, date: new Date().toISOString(), version: CONSENT_VERSION };
    localStorage.setItem(CONSENT_KEY, JSON.stringify(decision));
    setVisible(false);
  }

  return (
    <div className={styles.banner} role="dialog" aria-label="Consentement aux cookies">
      <div className={styles.content}>
        <p className={styles.text}>
          Nous utilisons des cookies pour assurer le bon fonctionnement de la plateforme.
          Vous pouvez accepter ou refuser leur utilisation. Pour en savoir plus, consultez nos{' '}
          <Link to="/mentions-legales" className={styles.link}>mentions légales</Link> et nos{' '}
          <Link to="/cgu" className={styles.link}>CGU</Link>.
        </p>
        <div className={styles.actions}>
          <button
            type="button"
            className={styles.btnRefuse}
            onClick={() => enregistrerChoix('refuse')}
          >
            Refuser
          </button>
          <button
            type="button"
            className={styles.btnAccept}
            onClick={() => enregistrerChoix('accept')}
          >
            Tout accepter
          </button>
        </div>
      </div>
    </div>
  );
}