import { useState } from 'react';
import { useFontScale } from '../../hooks/useFontScale';
import type { FontScaleConfig } from '../../contexts/fontScaleState';

const LABELS: Record<keyof FontScaleConfig, string> = {
  facility: '시설 라벨',
  ship: '선박 이름',
  analysis: '분석 라벨',
  area: '지역/국가명',
};

export function FontScalePanel() {
  const { fontScale, setFontScale } = useFontScale();
  const [open, setOpen] = useState(false);

  const update = (key: keyof FontScaleConfig, val: number) => {
    setFontScale({ ...fontScale, [key]: Math.round(val * 10) / 10 });
  };

  return (
    <div className="font-scale-section">
      <button type="button" className="font-scale-toggle" onClick={() => setOpen(!open)}>
        <span>Aa 글꼴 크기</span>
        <span>{open ? '▼' : '▶'}</span>
      </button>
      {open && (
        <div className="font-scale-sliders">
          {(Object.keys(LABELS) as (keyof FontScaleConfig)[]).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={fontScale[key]}
                onChange={e => update(key, parseFloat(e.target.value))} />
              <span>{fontScale[key].toFixed(1)}</span>
            </div>
          ))}
          <button type="button" className="font-scale-reset"
            onClick={() => setFontScale({ facility: 1.0, ship: 1.0, analysis: 1.0, area: 1.0 })}>
            초기화
          </button>
        </div>
      )}
    </div>
  );
}