export const DropdownMenu = () => {
  const ref = useRef<any>(null)
  const getAnchorRect = () => ref.current!.getBoundingClientRect()
  return (
    <Menu.Root positioning={{ getAnchorRect, placement: "right-start" }}>
      <Menu.Trigger asChild cursor="pointer">
        <Avatar.Root variant="solid" bg="orange.200" color="black">
          <Avatar.Fallback name="Segun Adebayo" />
        </Avatar.Root>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content borderRadius="xl">
            <Menu.Item
              asChild
              value="account"
              _hover={{ cursor: "pointer", bg: "orange.50" }}
            >
              <a href="/account">
                <Text>Account</Text>
              </a>
            </Menu.Item>
            <Menu.Separator />
            <Menu.Item
              asChild
              value="logout"
              _hover={{ cursor: "pointer", bg: "orange.50" }}
            >
              <LogoutLink>Logout</LogoutLink>
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}