assessment-model/src/app/components/ProfileDropDown.tsx

"use client";

import { Menu } from "@headlessui/react";
import { signOut } from "next-auth/react";
import Link from "next/link";
import Image from "next/image";

function ProfileDropDown({ userImage }: { userImage: string }) {
  return (
    <Menu as="div" className="relative">
      <Menu.Button className="rounded-full">
        {userImage ? (
          <Image
            src={userImage}
            alt={"Profile"}
            className="inline rounded-full text-white"
            height={48}
            width={48}
          />
        ) : (
          <span className="inline-block h-12 w-12 overflow-hidden rounded-full bg-stone-100">
            <svg
              className="h-full w-full text-stone-300"
              fill="currentColor"
              viewBox="0 0 24 24"
            >
              <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
          </span>
        )}
      </Menu.Button>
      <Menu.Items className="z-[100] absolute right-0 mt-2 w-48 origin-top-right overflow-hidden rounded-md border bg-white shadow-lg focus:outline-none">
        <Menu.Item>
          <Link href="/help" className="flex px-4 py-2 text-sm text-gray-700">
            Help
          </Link>
        </Menu.Item>
        <Menu.Item>
          <a>
            <button
              className="flex px-4 py-2 text-sm text-gray-700"
              onClick={() => signOut()}
            >
              Sign Out
            </button>
          </a>
        </Menu.Item>
      </Menu.Items>
    </Menu>
  );
}

export default ProfileDropDown;