import { range } from 'lodash';
import React, { useContext } from 'react';
import { getTranslations } from '../../shared/utils/localization-util';
import SettingsContext from '../settings-context';

interface AgeSelectProps {
  value?: number;
  disabled?: boolean;
  onChange?: (value: number) => void;
}

const AgeSelect: React.FC<AgeSelectProps> = ({ value, disabled, onChange }) => {
  const { language } = useContext(SettingsContext);
  const translations = getTranslations(language);

  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
    if (onChange) {
      onChange(event.target.selectedIndex);
    }
  };

  return (
    <div className="dropdown dropdown--small">
      <select onChange={handleChange} value={value ?? 0} disabled={disabled}>
        {range(0, 18).map((age) => (
          <option key={age} value={age}>
            {age} {translations.PRODUCT.YEAR}
          </option>
        ))}
      </select>
    </div>
  );
};

export default AgeSelect;