import { useAuth } from '~/hooks/use-auth'
import { MenuButton, MenuItem as HeadlessMenuItem } from '@headlessui/react'
import {
  ChevronDownIcon,
  AdjustmentsHorizontalIcon,
  ArrowRightStartOnRectangleIcon,
} from '@heroicons/react/24/solid'
import { BookOpenIcon } from '@heroicons/react/24/outline'
import { Menu, MenuItem, MenuItems, MenuSeparator } from '~/components/menu'
import clsx from 'clsx'
import { Link } from 'react-router'

export function UserMenu({ className }) {
  const { authUser } = useAuth()

  return (
    <Menu as="div" className={clsx('relative', className)}>
      <MenuButton className="flex gap-0.5 items-center cursor-pointer">
        <div className="w-10 h-10 bg-zinc-200 dark:bg-gray-800 rounded-full overflow-hidden">
          {/* <Avatar
            name={authUser.name}
            email={authUser.email}
            size={40}
            maxInitials={2}
          /> */}
        </div>
        <ChevronDownIcon className="w-5 fill-gray-500 dark:fill-white" />
      </MenuButton>

      <MenuItems className="w-64 mt-1">
        {/* User */}
        <HeadlessMenuItem as="div" className="py-2 px-4">
          <div className="font-semibold truncate">{authUser?.name}</div>
          <div className="text-sm text-gray-600 dark:text-slate-300 truncate">
            {authUser?.email}
          </div>
        </HeadlessMenuItem>

        <MenuSeparator />

        <MenuItem as={Link} target="_blank" to="/redirect-out">
          <BookOpenIcon className="w-5" /> Sala de aula
        </MenuItem>

        <MenuSeparator />

        <MenuItem as={Link} to="/settings">
          <AdjustmentsHorizontalIcon className="w-5" /> Configurações
        </MenuItem>

        <MenuItem as={Link} to="/auth/logout">
          <ArrowRightStartOnRectangleIcon className="w-5" /> Sair
        </MenuItem>
      </MenuItems>
    </Menu>
  )
}