import { UnstyledButton, useMantineColorScheme, useComputedColorScheme, rem } from '@mantine/core';
import { IconSun, IconMoon } from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';

export function ColorSchemeToggle() {
  const { t } = useTranslation();
  const { setColorScheme } = useMantineColorScheme();
  const computed = useComputedColorScheme('light', { getInitialValueInEffect: true });
  const isDark = computed === 'dark';

  return (
    <UnstyledButton
      aria-label={t('common.toggleTheme')}
      onClick={() => setColorScheme(isDark ? 'light' : 'dark')}
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: rem(38),
        height: rem(38),
        borderRadius: rem(12),
        background: 'var(--mantine-color-body)',
        color: 'var(--mantine-color-gray-6)',
        boxShadow: '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)',
        transition: 'all 150ms ease',
        cursor: 'pointer',
        border: 'none',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.background = 'var(--mantine-primary-color-light)';
        e.currentTarget.style.color = 'var(--mantine-primary-color-6)';
        e.currentTarget.style.boxShadow =
          '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px var(--mantine-primary-color-2)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.background = 'var(--mantine-color-body)';
        e.currentTarget.style.color = 'var(--mantine-color-gray-6)';
        e.currentTarget.style.boxShadow =
          '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)';
      }}
    >
      {isDark ? <IconSun size={19} /> : <IconMoon size={19} />}
    </UnstyledButton>
  );
}
