'use client'

import { useTranslations } from 'next-intl'
import { useTheme } from 'next-themes'

import { TbMoonStars, TbSun, TbSunMoon } from 'react-icons/tb'

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

import { HeaderButton } from '../Button'

export function SelectTheme() {
	const t = useTranslations('')
	const { setTheme, theme = 'system' } = useTheme()

	const onValueChange = (value: string) => {
		setTheme(value)
	}

	return (
		<Select
			trigger={
				<HeaderButton>
					<Select.Value />
				</HeaderButton>
			}
			align='end'
			sideOffset={9}
			value={theme}
			onValueChange={onValueChange}
		>
			<Select.Item value='light'>
				<TbSun size={24} /> <span>{t('light')}</span>
			</Select.Item>
			<Select.Item value='dark'>
				<TbMoonStars size={24} /> <span>{t('dark')}</span>
			</Select.Item>
			<Select.Item value='system'>
				<TbSunMoon size={20} /> <span>{t('system')}</span>
			</Select.Item>
		</Select>
	)
}
