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

export default function Header() {
  const recipe = useRecipe({ key: "header" });
  const styles = recipe();

  return (
    <chakra.div css={styles}>
      <Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
      <Stack gap="0">
        <Text color="color" 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>
      {/* End drop down menu */}
    </chakra.div>
  );
}

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