'use client';

import { FormControl, InputLabel, Select, MenuItem, SelectChangeEvent } from '@mui/material';
import { useLocale } from '@/hooks/useLocale';
import { useTranslation } from '@/hooks/useTranslation';

interface LanguageSelectorProps {
  variant?: 'standard' | 'outlined' | 'filled';
  fullWidth?: boolean;
}

/**
 * Language selector component for choosing the app's display language
 */
export function LanguageSelector({ variant = 'outlined', fullWidth = true }: LanguageSelectorProps) {
  const { language, setLanguage, supportedLanguages } = useLocale();
  const { t } = useTranslation('settings');

  const handleLanguageChange = async (event: SelectChangeEvent) => {
    await setLanguage(event.target.value);
  };

  return (
    <FormControl variant={variant} fullWidth={fullWidth}>
      <InputLabel id="language-selector-label">
        {t('preferences.language')}
      </InputLabel>
      <Select
        labelId="language-selector-label"
        id="language-selector"
        value={language}
        label={t('preferences.language')}
        onChange={handleLanguageChange}
      >
        {supportedLanguages.map((lang) => (
          <MenuItem key={lang.code} value={lang.code}>
            {lang.nativeName} ({lang.name})
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}