import {
  ActionIcon,
  Group,
  Tooltip,
  useComputedColorScheme,
  useMantineColorScheme,
} from '@mantine/core'
import { IconMoon, IconSun } from '@tabler/icons-react'
import cx from 'clsx'
import * as classes from './ActionToggle.module.css.ts'
export function ColorSchemeToggle() {
  const { setColorScheme } = useMantineColorScheme()
  const computedColorScheme = useComputedColorScheme('light', {
    getInitialValueInEffect: true,
  })

  return (
    <Group justify="center">
      <ActionIcon
        onClick={() =>
          setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')
        }
        variant="default"
        size="md"
        aria-label="Toggle color scheme"
      >
        <Tooltip label="Change mode">
          <IconSun
            className={cx(classes.icon, classes.icon.dark)}
            stroke={1.5}
          />
        </Tooltip>
        <Tooltip label="Change mode">
          <IconMoon
            className={cx(classes.icon, classes.icon.light)}
            stroke={1.5}
          />
        </Tooltip>
      </ActionIcon>
    </Group>
  )
}
