// Tweaks panel for Holibags — palette, type, motif

function HolibagsTweaks() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "palette": "default",
    "type": "fraunces",
    "motif": "subtle"
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply to document
  React.useEffect(() => {
    document.documentElement.setAttribute("data-palette", tweaks.palette);
    document.documentElement.setAttribute("data-type", tweaks.type);
    document.documentElement.setAttribute("data-motif", tweaks.motif);
  }, [tweaks.palette, tweaks.type, tweaks.motif]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakRadio
          value={tweaks.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "default", label: "Cream + Sage" },
            { value: "modern", label: "Modern" },
            { value: "warm-gold", label: "Warm Gold" },
            { value: "forest", label: "Forest" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Type">
        <TweakRadio
          value={tweaks.type}
          onChange={(v) => setTweak("type", v)}
          options={[
            { value: "fraunces", label: "Fraunces + Nunito" },
            { value: "playfair", label: "Playfair + Inter" },
            { value: "cormorant", label: "Cormorant + Inter" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Stitch motif">
        <TweakRadio
          value={tweaks.motif}
          onChange={(v) => setTweak("motif", v)}
          options={[
            { value: "subtle", label: "Subtle" },
            { value: "medium", label: "Medium" },
            { value: "bold", label: "Bold" },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

Object.assign(window, { HolibagsTweaks });