/* Pinuslab — Tweaks panel (React) */
const { useState, useEffect } = React;

function PinuslabTweaks() {
  const [theme, setTheme] = useState(window.PL.state.theme);
  const [density, setDensity] = useState(window.PL.state.density);

  useEffect(() => { window.PL.setTheme(theme); }, [theme]);
  useEffect(() => { window.PL.setDensity(density); }, [density]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Density">
        <TweakRadio
          value={density} onChange={setDensity}
          options={[
            { value: 'editorial', label: 'Editorial' },
            { value: 'compact', label: 'Compact' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Theme">
        <TweakRadio
          value={theme} onChange={setTheme}
          options={[
            { value: 'light', label: 'Light mist' },
            { value: 'dark', label: 'Dark pine' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<PinuslabTweaks />);