import type { ChoroplethMetric } from './types';

interface Props {
  metric: ChoroplethMetric;
  onChange: (m: ChoroplethMetric) => void;
}

const METRICS: { id: ChoroplethMetric; label: string; hint: string; icon: string }[] = [
  { id: 'value',    label: 'Valoare',     hint: 'cumulată per UAT',    icon: '€' },
  { id: 'direct',   label: 'Direct',      hint: '% achiziție directă', icon: '⚡' },
  { id: 'hhi',      label: 'HHI',         hint: 'concentrare furnizori', icon: '⚖' },
  { id: 'topshare', label: 'Top furnizor', hint: '% pe primul furnizor', icon: '👑' },
  { id: 'q4spike',  label: 'Spike Q4',    hint: 'rush sfârșit de an',  icon: '⏱' },
];

export function MetricSwitcher({ metric, onChange }: Props) {
  return (
    <div className="harta-metric-switcher">
      <div className="harta-metric-label">Vizualizare</div>
      <div className="harta-metric-tabs">
        {METRICS.map((m) => (
          <button
            key={m.id}
            onClick={() => onChange(m.id)}
            className={`harta-metric-tab ${metric === m.id ? 'is-active' : ''}`}
            title={m.hint}
          >
            <span className="harta-metric-icon">{m.icon}</span>
            <span className="harta-metric-name">{m.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}
