import cx from 'clsx';
import { TbMoon, TbSun } from 'react-icons/tb';
import { ActionIcon, useMantineColorScheme } from '@mantine/core';
import classes from './ColorSchemeToggle.module.css';

export function ColorSchemeToggle() {
  // from https://mantine.dev/theming/color-schemes/
  const { colorScheme, setColorScheme } = useMantineColorScheme();

  return (
    <ActionIcon
      onClick={() => setColorScheme(colorScheme === 'light' ? 'dark' : 'light')}
      variant="default"
      size="xl"
      aria-label="Toggle color scheme"
    >
      <TbSun className={cx(classes.icon, classes.light)} />
      <TbMoon className={cx(classes.icon, classes.dark)} />
    </ActionIcon>
  );
}
