'use client';

import { useTranslations } from 'next-intl';
import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
import type { TodayChartPeriod } from '@/components/today/chart-periods';

type TodayChartPeriodSelectProps = {
  value: TodayChartPeriod;
  options: readonly TodayChartPeriod[];
  onChange: (period: TodayChartPeriod) => void;
  disabled?: boolean;
  id?: string;
};

export function TodayChartPeriodSelect({
  value,
  options,
  onChange,
  disabled = false,
  id,
}: TodayChartPeriodSelectProps) {
  const t = useTranslations('today');

  const labelFor = (period: TodayChartPeriod) => {
    switch (period) {
      case 'month':
        return t('periodMonth');
      case 'year':
        return t('periodYear');
      default:
        return t('periodWeek');
    }
  };

  return (
    <select
      id={id}
      value={value}
      disabled={disabled}
      aria-label={t('periodSelectAria')}
      className={`${FORM_SELECT_CLASS} max-w-[7.5rem] shrink-0 py-0.5 text-xs`}
      onChange={(event) => onChange(event.target.value as TodayChartPeriod)}
    >
      {options.map((period) => (
        <option key={period} value={period}>
          {labelFor(period)}
        </option>
      ))}
    </select>
  );
}