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

interface Props {
  year: YearFilter;
  onChange: (year: YearFilter) => void;
}

const YEARS = [2020, 2021, 2022, 2023, 2024, 2025, 2026];

export function TimelineScrubber({ year, onChange }: Props) {
  return (
    <div className="harta-timeline">
      <button
        onClick={() => onChange('all')}
        className={`harta-timeline-all ${year === 'all' ? 'is-active' : ''}`}
      >
        Toți anii
      </button>
      <div className="harta-timeline-track">
        {YEARS.map((y) => (
          <button
            key={y}
            onClick={() => onChange(y)}
            className={`harta-timeline-tick ${year === y ? 'is-active' : ''}`}
          >
            <span className="harta-timeline-tick-dot" />
            <span className="harta-timeline-tick-label">{String(y).slice(2)}</span>
          </button>
        ))}
      </div>
    </div>
  );
}
