import { setAppLanguage } from '#/state/preferences/app-language';
import { LOCALE } from '#/locale/intl/locale';
import { APP_LANGUAGES } from '#/locale/languages';
import * as Select from '#/components/Select';
import { Button, ButtonIcon } from '#/components/web/Button';
import EarthIcon from '#/icons/central/Earth_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';
import type { Locale } from '#/paraglide/runtime';
import * as styles from './AppLanguageDropdown.css';
const onChangeAppLanguage = (value: Locale) => {
if (value !== LOCALE) {
setAppLanguage(value);
}
};
export function AppLanguageDropdown() {
const items = APP_LANGUAGES.map((language) => ({
label: language.name,
value: language.code2,
}));
return (
<Select.Root items={items} onValueChange={onChangeAppLanguage} value={LOCALE}>
<Select.Trigger
render={
<Button
className={styles.trigger}
color="secondary"
label={m['components.appLanguageDropdown.a11y.change']()}
shape="rectangular"
size="tiny"
variant="ghost"
/>
}
>
<ButtonIcon icon={EarthIcon} size="sm" />
<Select.Value
className={styles.value}
placeholder={m['components.appLanguageDropdown.a11y.select']()}
/>
<Select.Icon className={styles.icon} />
</Select.Trigger>
<Select.Content
items={items}
renderItem={({ label, value }) => (
<Select.Item label={label} value={value}>
<Select.ItemIndicator />
<Select.ItemText>{label}</Select.ItemText>
</Select.Item>
)}
/>
</Select.Root>
);
}