import LanguageOutlined from "@mui/icons-material/LanguageOutlined";
import InputAdornment from "@mui/material/InputAdornment";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import { useExternalI18n } from "./ExternalI18nProvider.jsx";

export function LanguageSwitcher({ compact = false }) {
  const { languages, locale, setLocale, t } = useExternalI18n();

  return (
    <TextField
      className="external-language-switcher"
      label={t("language.label")}
      select
      size="small"
      slotProps={{
        input: { startAdornment: compact ? null : <InputAdornment position="start"><LanguageOutlined fontSize="small" /></InputAdornment> },
        select: { displayEmpty: true }
      }}
      value={locale}
      onChange={(event) => setLocale(event.target.value)}
    >
      {languages.map((language) => <MenuItem key={language.value} value={language.value}>{language.label}</MenuItem>)}
    </TextField>
  );
}
