import { IconSun } from '@tabler/icons-react';
import {
  ActionIcon,
  Burger,
  Flex,
  Group, Image,
  MantineColorScheme,
  useMantineColorScheme,
} from '@mantine/core';
import { useToggle } from '@mantine/hooks';

type HeaderProps = {
  toggleMobile: () => void;
  toggleDesktop: () => void;

  mobileOpened: boolean;
  desktopOpened: boolean;
};
const Header = ({ toggleMobile, toggleDesktop, mobileOpened, desktopOpened }: HeaderProps) => {
  const { setColorScheme } = useMantineColorScheme();
  const [theme, toggle] = useToggle(['light', 'dark']);
  const onChangeThemeClick = () => {
    toggle();
    setColorScheme(theme as MantineColorScheme);
  };
  return (
    <Flex align="center" justify="space-between" h="100%">
      <Group h="100%" px="md">
        <Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
        <Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom="sm" size="sm" />
      </Group>
к      <Group h="100%" px="md">
        <ActionIcon onClick={() => onChangeThemeClick()} variant="default">
          <IconSun />
        </ActionIcon>
      </Group>
    </Flex>
  );
};

export default Header;