/* eslint-disable */
// TerroirToggle — bottom-center segmented control with two modes
// (Cépages / Terroir).
//
// L'onglet Millésimes (assemblage chiffré par année + note de millésime) a
// été retiré : l'encépagement affiché ne varie plus par millésime, donc ce
// troisième onglet n'apportait plus d'information propre. Le détail par
// millésime (notes, dégustation, fiche technique) reste consultable via la
// popup "Fiche complète", qui donne accès aux pages statiques par année.
//
// Note: "Terroir" is the user-facing label for what internally stays
// the "sols" mode — we collapsed the Sols / Sous-sols pair into a
// single soils view (the sous-sols data was synthetic and redundant
// with the surface category for our use case).

function TerroirToggle({ mode, onChange, lang }) {
  const labels = {
    fr: { cepages: "Cépages", sols: "Terroir" },
    en: { cepages: "Grapes",  sols: "Terroir" },
  };
  const L = labels[lang] || labels.fr;
  const baseOptions = ["cepages", "sols"];

  return (
    <div className="terroir-toggle" role="tablist" aria-label="Display mode">
      {baseOptions.map(opt => (
        <button
          key={opt}
          role="tab"
          aria-selected={mode === opt}
          className={mode === opt ? "active" : ""}
          onClick={() => onChange(opt)}
        >
          {L[opt]}
        </button>
      ))}
    </div>
  );
}

window.TerroirToggle = TerroirToggle;