import { useState } from 'react';
import './Legend.css';

function LegendContent() {
  return (
    <>
      <div className="legend__item">
        <span className="legend__swatch legend__swatch--obs-s2" />
        <span>Sargasses (S2 confirmé)</span>
      </div>
      <div className="legend__item">
        <span className="legend__swatch legend__swatch--obs-s3" />
        <span>Signal incertain (S3)</span>
      </div>
      <div className="legend__item">
        <span className="legend__swatch legend__swatch--fore" />
        <span>Prévision dérive</span>
      </div>
      <div className="legend__divider" />
      <div className="legend__item">
        <span className="legend__dot legend__dot--low" />
        <span>OK</span>
      </div>
      <div className="legend__item">
        <span className="legend__dot legend__dot--medium" />
        <span>Risque</span>
      </div>
      <div className="legend__item">
        <span className="legend__dot legend__dot--high" />
        <span>Impact</span>
      </div>
    </>
  );
}

export default function Legend() {
  const [open, setOpen] = useState(false);

  return (
    <>
      {/* Bouton visible uniquement sur mobile */}
      <button
        className="legend__toggle"
        onClick={() => setOpen(o => !o)}
        aria-expanded={open}
        aria-label="Afficher la légende"
      >
        ◈
      </button>

      {/* Backdrop mobile quand ouvert */}
      {open && (
        <div className="legend__backdrop" onClick={() => setOpen(false)} aria-hidden="true" />
      )}

      <aside className={`legend${open ? ' legend--open' : ''}`} aria-label="Légende">
        <div className="legend__header">
          <p className="legend__title">Légende</p>
          {/* Croix de fermeture — mobile uniquement */}
          <button className="legend__close" onClick={() => setOpen(false)} aria-label="Fermer">✕</button>
        </div>
        <LegendContent />
      </aside>
    </>
  );
}
