import React, {useState } from 'react';
import { Header, MediaQuery, Burger, Text, ThemeIcon, Group, Title } from '@mantine/core';
import { useMantineTheme } from '@mantine/core';
import { BsHouseDoor } from 'react-icons/bs'


function AppHeader(props) {
  const theme = useMantineTheme();

  return (
      <Header height={70} padding="md">
      {/* You can handle other responsive styles with MediaQuery component or createStyles function */}
      <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
        <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
          <Burger
            opened={props.opened}
            onClick={() => props.setOpened((o) => !o)}
            size="sm"
            color={theme.colors.gray[6]}
            mr="xl"
          />
        </MediaQuery>
        <Group>
          <BsHouseDoor size={30} />
          <Title><Text inherit variant="gradient" gradient={{ from: 'indigo', to: 'cyan', deg: 45 }}>goInventorize</Text></Title>
        </Group>

      </div>
    </Header>
  )
}

  

export default AppHeader