const { useState } = React;

function useTweaks(defaults) {
  const [tweaks, setTweaks] = useState(defaults || {});

  function setTweak(key, value) {
    setTweaks((current) => ({ ...current, [key]: value }));
  }

  return [tweaks, setTweak];
}

function TweaksPanel({ title, children }) {
  return (
    <aside className="tweaks-panel" aria-label={title}>
      <h3>{title}</h3>
      {children}
    </aside>
  );
}

function TweakSection({ label }) {
  return <div className="tweak-section">{label}</div>;
}

function TweakRadio({ label, value, options, onChange }) {
  return (
    <fieldset className="tweak-control">
      <legend>{label}</legend>
      <div className="tweak-options">
        {options.map((option) => (
          <label key={option.value}>
            <input
              type="radio"
              name={label}
              value={option.value}
              checked={value === option.value}
              onChange={() => onChange(option.value)}
            />
            <span>{option.label}</span>
          </label>
        ))}
      </div>
    </fieldset>
  );
}