import React, { useState } from 'react'
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import { CgProfile } from "react-icons/cg";
import classnames from 'classnames';

interface DropdownProps {
    userRole: "member" | "employer";
}

const AccountDropdown: React.FC<DropdownProps> = ({userRole}) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div className="">
      <Menu>
        <MenuButton as="div" className={classnames(
            "inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm/6 font-semibold text-platinum focus:outline-hidden data-open:text-bronze data-hover:text-bronze", 
                {
                    'cursor-pointer': isHovered,
                }
            )}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
        >
          <CgProfile size={32} />
        </MenuButton>
        <MenuItems anchor="bottom end" className={"py-1 bg-deepcove border-2 border-copper focus:outline-hidden text-platinum text-md text-right font-semibold rounded-lg z-2"}>
            <MenuItem as="div" className={"px-3 py-1.5"}>
                <a className="block data-focus:text-bluemana hover:text-bluemana" href="/">
                    Change Password
                </a>
            </MenuItem>
            <MenuItem as="div" className={"px-3 py-1.5"}>
                <a className="block data-focus:text-bluemana hover:text-bluemana" href="/">
                    Sign Out
                </a>
            </MenuItem>
        </MenuItems>

        {/* <MenuItems
          transition
          anchor="bottom end"
          className="w-52 origin-top-right rounded-xl border border-white/5 bg-white/5 p-1 text-sm/6 text-white transition duration-100 ease-out [--anchor-gap:--spacing(1)] focus:outline-none data-closed:scale-95 data-closed:opacity-0"
        >
          <MenuItem>
            <button className="group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-focus:bg-white/10">
              Edit
              <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-focus:inline">⌘E</kbd>
            </button>
          </MenuItem>
          <MenuItem>
            <button className="group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-focus:bg-white/10">
              Duplicate
              <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-focus:inline">⌘D</kbd>
            </button>
          </MenuItem>
          <div className="my-1 h-px bg-white/5" />
          <MenuItem>
            <button className="group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-focus:bg-white/10">
              Archive
              <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-focus:inline">⌘A</kbd>
            </button>
          </MenuItem>
          <MenuItem>
            <button className="group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-focus:bg-white/10">
              Delete
              <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-focus:inline">⌘D</kbd>
            </button>
          </MenuItem>
        </MenuItems> */}
      </Menu>
    </div>
  );
};

export default AccountDropdown;
