// Tweaks — versione Riviera
const { useEffect } = React;

const RIVIERA_DEFAULTS = /*EDITMODE-BEGIN*/{
  "stripe": "#ED9510",
  "grain": true,
  "serif": "Marcellus"
}/*EDITMODE-END*/;

function RivieraTweaks() {
  const [t, setTweak] = useTweaks(RIVIERA_DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--stripe", t.stripe);
    root.style.setProperty(
      "--font-serif",
      t.serif === "Cormorant" ? "'Cormorant Garamond', serif" : "'Marcellus', serif"
    );
    document.body.classList.toggle("no-grain", !t.grain);
  }, [t.stripe, t.grain, t.serif]);

  return (
    <TweaksPanel>
      <TweakSection label="Stile Riviera" />
      <TweakColor
        label="Colore righe"
        value={t.stripe}
        options={["#ED9510", "#E25728", "#4E8BBB"]}
        onChange={(v) => setTweak("stripe", v)}
      />
      <TweakRadio
        label="Serif titoli"
        value={t.serif}
        options={["Marcellus", "Cormorant"]}
        onChange={(v) => setTweak("serif", v)}
      />
      <TweakToggle
        label="Grana vintage"
        value={t.grain}
        onChange={(v) => setTweak("grain", v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<RivieraTweaks />);