import { Box, Button, Avatar, HStack, Stack, Text, Menu, Portal } from "@chakra-ui/react"

export default function Header() {
  return (
    <Box  w="100%" h="100%" 
          borderBottom="1px" 
          borderColor="black" 
          borderStyle="solid" 
          display="flex" 
          flexDirection="row" 
          justifyContent="space-between" 
          alignItems="center" paddingLeft={5} paddingRight={2}
          bg="#EDF1F1"
    >
      <Button color="#19332D" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
      <Button variant="plain">
        <HStack key={user.email} gap="4">
          <Stack gap="0">
            <Text color="#19332D" fontWeight="bold" textStyle="lg">{user.name}</Text>
            <Text color="fg.muted" textStyle="sm">{user.email}</Text>
          </Stack>
          {/* Add a drop down menu to the avatar */}
          <Menu.Root>
            <Menu.Trigger rounded="full" focusRing="outside">
            <Avatar.Root>
              <Avatar.Fallback name={user.name} />
              <Avatar.Image src={user.avatar} />
            </Avatar.Root>
            </Menu.Trigger>
            <Portal>
              <Menu.Positioner zIndex="popover">
                <Menu.Content>
                  <Menu.Item value="account">Account</Menu.Item>
                  <Menu.Item value="settings">Settings</Menu.Item>
                  <Menu.Item value="logout">Logout</Menu.Item>
                </Menu.Content>
              </Menu.Positioner>
            </Portal>
          </Menu.Root>
        
        </HStack>
      </Button>
    </Box>
  );
}

const user = {
  name: "venessa kuchenik",
  email: "vkuchenik@contractor.usgs.gov",
  // avatar: "src\\assets\\user_profile.svg"
}