import { TIME_RANGES, RANGE_LABELS, type TimeRange } from './time-range';

interface Props {
  active: TimeRange;
  onChange: (range: TimeRange) => void;
  lang?: 'en' | 'de';
}

export function TimeRangePicker({ active, onChange, lang = 'en' }: Props) {
  return (
    <div className="flex justify-center mb-5">
      <div className="inline-flex items-center gap-0.5 rounded-full border border-border bg-muted/60 p-1 shadow-sm">
        {TIME_RANGES.map((r) => {
          const isActive = r === active;
          return (
            <button
              key={r}
              type="button"
              role="tab"
              aria-selected={isActive}
              onClick={() => onChange(r)}
              className={
                'inline-flex items-center px-4 py-2 rounded-full text-xs font-semibold whitespace-nowrap transition-all ' +
                (isActive
                  ? 'bg-gradient-to-br from-emerald-600 to-emerald-700 text-white shadow-md shadow-emerald-600/30'
                  : 'text-foreground/70 hover:bg-background')
              }
            >
              {RANGE_LABELS[r][lang] || RANGE_LABELS[r].en}
            </button>
          );
        })}
      </div>
    </div>
  );
}