/* global React */

function TweaksUI({ tweaks, setTweak }) {
  const { TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand">
        <TweakColor
          label="Accent color"
          value={tweaks.accent}
          options={["#3B6BFF", "#34D399", "#C5A572", "#FF5A2E", "#A78BFA", "#FFFFFF"]}
          onChange={v => setTweak("accent", v)}
        />
      </TweakSection>
      <TweakSection label="Hero">
        <TweakRadio
          label="Hero visual"
          value={tweaks.hero}
          options={[
            { label: "Receipt", value: "receipt" },
            { label: "Dashboard", value: "dashboard" },
          ]}
          onChange={v => setTweak("hero", v)}
        />
        <TweakRadio
          label="Headline"
          value={tweaks.headline}
          options={[
            { label: "Aggregator", value: "aggregator" },
            { label: "One stack", value: "stack" },
            { label: "Region", value: "region" },
          ]}
          onChange={v => setTweak("headline", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

window.RivalTweaksUI = TweaksUI;