import { useContext } from "react";
import { Menu } from "@headlessui/react";
import { UserContext } from "../../../../contexts/UserContext";

export default function CompanyDropdown() {
  const userContext = useContext(UserContext);

  const company: string =
    // @ts-ignore
    userContext.getUser().companies &&
    // @ts-ignore
    userContext.getUser().companies.length > 0
      ? // @ts-ignore
        userContext.getUser().companies[0].name
      : "No Company";

  return (
    <div className="text-right">
      <Menu as="div" className="relative inline-block text-left">
        <div>
          <Menu.Button className="inline-flex w-full justify-center rounded-full bg-black bg-opacity-30 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-40 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 duration-300">
            {company}
          </Menu.Button>
        </div>
      </Menu>
    </div>
  );
}
