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

interface Props {
  filters: MapFilters;
  onChange: (next: Partial<MapFilters>) => void;
}

export function FilterChips({ filters, onChange }: Props) {
  const chips: { key: keyof MapFilters; label: string; clearTo: any }[] = [];
  if (filters.year !== 'all') {
    chips.push({ key: 'year', label: `Anul ${filters.year}`, clearTo: 'all' });
  }

  if (chips.length === 0) {
    return (
      <div className="harta-chips-empty">
        <span className="harta-kbd">⌘ K</span>
        <span>filtrează după an, județ sau categorie</span>
      </div>
    );
  }

  return (
    <div className="harta-chips">
      {chips.map((c) => (
        <button
          key={c.key}
          onClick={() => onChange({ [c.key]: c.clearTo })}
          className="harta-chip"
        >
          <span>{c.label}</span>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      ))}
      <button
        onClick={() => onChange({ year: 'all' })}
        className="harta-chip-clear"
      >
        Resetează tot
      </button>
    </div>
  );
}
