/* global React, useTweaks, TweaksPanel, TweakSection, TweakSlider, TweakToggle, TweakRadio */

const HERO_LAYOUTS = [
  { value: "centered", label: "CENTERED" },
  { value: "left", label: "LEFT" },
  { value: "split", label: "SPLIT" },
];

const GRID_COLS = [
  { value: "2", label: "2 COL" },
  { value: "3", label: "3 COL" },
  { value: "asymmetric", label: "ASYMM" },
];

const ACCENTS = [
  { value: "ember", label: "EMBER" },
  { value: "bone", label: "BONE" },
  { value: "sage", label: "SAGE" },
  { value: "steel", label: "STEEL" },
];

const ACCENT_HEX = { ember: "#d97757", bone: "#ffffff", sage: "#79c279", steel: "#7898d9" };
window.ACCENT_HEX = ACCENT_HEX;

function Tweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Accent" />
      <TweakRadio label="Color" value={tweaks.accent} options={ACCENTS}
                  onChange={(v) => setTweak("accent", v)} />

      <TweakSection label="Grain" />
      <TweakSlider label="Intensity" value={tweaks.grain} min={0} max={20} step={1} unit="%"
                   onChange={(v) => setTweak("grain", v)} />

      <TweakSection label="Hero Layout" />
      <TweakRadio label="Layout" value={tweaks.heroLayout} options={HERO_LAYOUTS}
                  onChange={(v) => setTweak("heroLayout", v)} />

      <TweakSection label="Works Grid" />
      <TweakRadio label="Columns" value={tweaks.gridCols} options={GRID_COLS}
                  onChange={(v) => setTweak("gridCols", v)} />

      <TweakSection label="Type Scale" />
      <TweakSlider label="Size" value={tweaks.typeScale} min={85} max={115} step={1} unit="%"
                   onChange={(v) => setTweak("typeScale", v)} />

      <TweakSection label="Cursor" />
      <TweakToggle label="Crosshair" value={tweaks.crosshair}
                   onChange={(v) => setTweak("crosshair", v)} />
    </TweaksPanel>
  );
}

window.Tweaks = Tweaks;