// Tweaks panel — chart style picker
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "chartStyle": "donut"
}/*EDITMODE-END*/;

const TweaksApp = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    window.__caseChartStyle = tweaks.chartStyle;
  }, [tweaks.chartStyle]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Estilo dos gráficos">
        <TweakRadio
          label="Visualização do case"
          value={tweaks.chartStyle}
          onChange={(v) => setTweak('chartStyle', v)}
          options={[
            { value: "donut", label: "Donuts" },
            { value: "bignum", label: "Big numbers" },
            { value: "bar", label: "Barras" },
          ]}
        />
        <p style={{margin:"8px 0 0", fontSize:12, color:"var(--ink-3)", lineHeight:1.45}}>
          Alterna como as métricas reais do Canevas são exibidas na seção do case.
        </p>
      </TweakSection>
    </TweaksPanel>
  );
};

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