function CookieBanner({ onAccept, onDecline, onNav }) {
  const EXIT_MS = 400;
  const [exiting, setExiting] = React.useState(false);
  const exitOnceRef = React.useRef(false);
  const exitTimerRef = React.useRef(null);

  React.useEffect(() => () => {
    if (exitTimerRef.current !== null) window.clearTimeout(exitTimerRef.current);
  }, []);

  const runExit = (finish) => {
    if (exitOnceRef.current) return;
    exitOnceRef.current = true;
    setExiting(true);
    exitTimerRef.current = window.setTimeout(() => {
      exitTimerRef.current = null;
      finish();
    }, EXIT_MS);
  };

  return (
    <div
      className={'as-cookie' + (exiting ? ' is-exiting' : '')}
      role="dialog"
      aria-label="Consenso cookie"
      aria-live="polite"
      aria-busy={exiting}
    >
      <div className="as-cookie-inner">
        <div className="as-cookie-text">
          <p className="as-cookie-lead">
            <b>Questo sito utilizza cookie di terze parti.</b>
            {' '}Carichiamo <b>Google Maps</b> per mostrarle dove siamo. Può accettare o rifiutare.
          </p>
          <p className="as-cookie-more">
            Per maggiori informazioni può consultare la{' '}
            <a href="#" onClick={(e) => { e.preventDefault(); onNav('cookie-policy'); }}>Cookie Policy</a>
            {' '}e la{' '}
            <a href="#" onClick={(e) => { e.preventDefault(); onNav('privacy'); }}>Privacy Policy</a>.
          </p>
        </div>
        <div className="as-cookie-btns">
          <button type="button" className="btn as-cookie-decline" disabled={exiting} onClick={() => runExit(onDecline)}>Rifiuta</button>
          <button type="button" className="btn btn-primary" disabled={exiting} onClick={() => runExit(onAccept)}>Accetta</button>
        </div>
      </div>
    </div>
  );
}

window.CookieBanner = CookieBanner;
