import { Anchor, Burger, Container, Group, Text } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';
import classes from './HeaderSimple.module.css';

export function HeaderSimple() {
  const [opened, { toggle }] = useDisclosure(false);

  return (
    <header className={classes.header}>
      <Container size="md" className={classes.inner}>
        <Text fw={700} size="lg" style={{ userSelect: 'none', cursor: 'default' }}>Craig Macfadyen</Text>
        <Group gap={5} visibleFrom="xs">
          <Anchor href="#" className={classes.link}>
            CV
          </Anchor>
          <Anchor href="#" className={classes.link}>
            Blog
          </Anchor>
        </Group>

        <Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />
        <ColorSchemeToggle />
      </Container>
    </header>
  );
}