'use client'

import Image from 'next/image'
import enSrc from '../../../../../public/images/lang/en.png'


import { Select } from '@/components/atoms'

import { useLocale } from 'next-intl'
import { HeaderButton } from '../Button'

export function SelectLang() {
	const language = useLocale();

	const onValueChange = async (value: string) => {
		// setCurrentLanguage(value)
	}

	return (
		<Select
			trigger={
				<HeaderButton>
					<Select.Value />
				</HeaderButton>
			}
			align='end'
			sideOffset={9}
			value={language}
			onValueChange={onValueChange}
		>
			<Select.Item value='ru'>
				<Image
					src={enSrc}
					alt="Русский"
				/>
		 		<span>Русский</span>
			</Select.Item>
			<Select.Item value='en'>
				<Image
					src={enSrc}
					alt="English"
				/>
		 		<span>English</span>
			</Select.Item>
		</Select>
	)
}
