import { useState } from 'react';
import { useSymbolScale } from '../../hooks/useSymbolScale';
import type { SymbolScaleConfig } from '../../contexts/symbolScaleState';

const LABELS: Record<keyof SymbolScaleConfig, string> = {
  ship: '선박 심볼',
  aircraft: '항공기 심볼',
};

export function SymbolScalePanel() {
  const { symbolScale, setSymbolScale } = useSymbolScale();
  const [open, setOpen] = useState(false);

  const update = (key: keyof SymbolScaleConfig, val: number) => {
    setSymbolScale({ ...symbolScale, [key]: Math.round(val * 10) / 10 });
  };

  return (
    <div className="font-scale-section">
      <button type="button" className="font-scale-toggle" onClick={() => setOpen(!open)}>
        <span>&#9670; 심볼 크기</span>
        <span>{open ? '▼' : '▶'}</span>
      </button>
      {open && (
        <div className="font-scale-sliders">
          {(Object.keys(LABELS) as (keyof SymbolScaleConfig)[]).map(key => (
            <div key={key} className="font-scale-row">
              <label>{LABELS[key]}</label>
              <input type="range" min={0.5} max={2.0} step={0.1}
                value={symbolScale[key]}
                onChange={e => update(key, parseFloat(e.target.value))} />
              <span>{symbolScale[key].toFixed(1)}</span>
            </div>
          ))}
          <button type="button" className="font-scale-reset"
            onClick={() => setSymbolScale({ ship: 1.0, aircraft: 1.0 })}>
            초기화
          </button>
        </div>
      )}
    </div>
  );
}