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>
  )
}