/* BAZ26 — Tweaks */

const { useState: useStateT } = React;

function BazTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks · BAZ26">
      <TweakSection title="Hero variant">
        <TweakRadio
          value={tweaks.heroVariant}
          options={[
            { value: 'cursor', label: 'Cursor' },
            { value: 'scramble', label: 'Scramble' },
            { value: 'split', label: 'Split' },
          ]}
          onChange={(v) => setTweak('heroVariant', v)}
        />
      </TweakSection>

      <TweakSection title="Accent">
        <TweakRadio
          value={tweaks.accent}
          options={[
            { value: 'teal', label: 'Teal' },
            { value: 'ember', label: 'Ember' },
            { value: 'cobalt', label: 'Cobalt' },
            { value: 'moss', label: 'Moss' },
          ]}
          onChange={(v) => setTweak('accent', v)}
        />
      </TweakSection>

      <TweakSection title="Paper tone">
        <TweakRadio
          value={tweaks.paper}
          options={[
            { value: 'default', label: 'Cool' },
            { value: 'warm', label: 'Warm' },
          ]}
          onChange={(v) => setTweak('paper', v)}
        />
      </TweakSection>

      <TweakSection title="Mode">
        <TweakRadio
          value={tweaks.mode || 'jedi'}
          options={[
            { value: 'jedi', label: 'Jedi' },
            { value: 'sith', label: 'Sith' },
          ]}
          onChange={(v) => setTweak('mode', v)}
        />
      </TweakSection>

      <TweakSection title="Motion">
        <TweakToggle
          label="Custom cursor"
          value={tweaks.cursor}
          onChange={(v) => setTweak('cursor', v)}
        />
        <TweakToggle
          label="Show loader on reload"
          value={tweaks.loader}
          onChange={(v) => setTweak('loader', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

window.BazTweaks = BazTweaks;