// Tweaks panel — exposes Snack Box card style
const { useState, useEffect } = React;

function HKTweaks() {
  const [t, setTweak] = useTweaks(window.HK_TWEAKS || { cardStyle: 'rounded' });

  useEffect(() => {
    document.body.dataset.cardStyle = t.cardStyle;
  }, [t.cardStyle]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Snack Box card style">
        <TweakSelect
          label="Card shape"
          value={t.cardStyle}
          options={[
            { value: 'rounded', label: 'Rounded (default)' },
            { value: 'square', label: 'Square / editorial' },
            { value: 'pill', label: 'Pill / soft' },
            { value: 'organic', label: 'Organic / hand-drawn' },
          ]}
          onChange={(v) => setTweak('cardStyle', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const tweakRoot = document.createElement('div');
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<HKTweaks />);