"use client";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import { useTranslation } from "react-i18next";

export const examLanguages = [
  { code: "en", label: "English" },
  { code: "es", label: "Spanish" },
  { code: "fr", label: "French" },
  // { code: "de", label: "German" },
  // { code: "it", label: "Italian" },
  // { code: "pt", label: "Portuguese" },
  // { code: "zh", label: "Chinese (Simplified)" },
  // { code: "ar", label: "Arabic" },
  // { code: "ru", label: "Russian" },
];

type Props = {
  language: string;
  setLanguage: (value: string) => void;
};

export default function StepLanguage({ language, setLanguage }: Props) {
  const { t } = useTranslation("common");

  return (
    <div className="md:w-1/2 my-5 mx-auto">
      <FormControl fullWidth>
        <InputLabel id="exam-language-label">{t("booking.stepLanguage.label")}</InputLabel>
        <Select
          labelId="exam-language-label"
          value={language}
          onChange={(e) => setLanguage(e.target.value)}
        >
          {examLanguages.map((lang) => (
            <MenuItem key={lang.code} value={lang.code}>
              {lang.label}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>

  );
}