// Tweaks panel — toggled by host

function Tweaks({ show, vhsCount, setVhsCount }) {
  if (!show) return null;
  return (
    <div className="tweaks-panel">
      <div className="t-header">
        <span>◉ TWEAKS</span>
        <span style={{ color: "var(--neon)" }}>TROOPER</span>
      </div>
      <label>
        VHS VISIBLES EN EL CUARTO
        <span className="val"> {vhsCount}</span>
      </label>
      <input
        type="range"
        min="2" max="8" step="2"
        value={vhsCount}
        onChange={e => setVhsCount(parseInt(e.target.value, 10))}
      />
      <div style={{ fontSize: 10, opacity: 0.5, marginTop: 10, letterSpacing: "0.1em" }}>
        (en la galería siempre se muestran los 8)
      </div>
    </div>
  );
}

window.Tweaks = Tweaks;