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;