main
import { IconMoon as Moon, IconSun as Sun } from '@tabler/icons-react'
import { t } from '@/shared/i18n'
import type { ThemeModel } from '../model/use-theme'
export function ThemeSwitch({ model }: { model: ThemeModel }) {
const { theme, dark, toggle } = model
return (
<button
type="button"
className="flex size-11 items-center justify-center rounded-lg text-icon hover:bg-elevated hover:text-ink"
aria-label={t(dark ? 'theme.toLight' : 'theme.toDark')}
title={theme === 'system' ? t('theme.system') : t(dark ? 'theme.currentDark' : 'theme.currentLight')}
onClick={toggle}
>
{dark ? <Sun size={18} strokeWidth={1.6} /> : <Moon size={18} strokeWidth={1.6} />}
</button>
)
}