"use client";
import { useAuth } from "@/lib/context/auth-context";
import { userLogout } from "@/lib/utils/auth-token";
import { accountMenu } from "@/lib/utils/menu";
import { UserIcon } from "@/modules/icons";
import Link from "next/link";
import { useEffect, useState } from "react";

export default function Page() {
  const [mounted, setMounted] = useState(false);
  const { user, setUser, setUserToken } = useAuth();

  useEffect(() => {
    setMounted(true);
  }, []);

  return (mounted && user?.email) ? (
    <div className="z-10 relative main-menu">
      <button
        type="button"
        className="group lg:py-5 inline-flex gap-2 text-[15px] items-center text-neutral-black-87 font-medium hover:text-primary"
      >
        <div className="hidden lg:block text-ellipsis max-w-[80px] overflow-hidden whitespace-nowrap group-hover:text-primary">
          {user?.firstName} {user?.lastName}
        </div>
        <div className="flex items-center justify-center w-7 h-7 border border-neutral-black-87 group-hover:border-primary rounded-full ">
          <UserIcon />
        </div>
      </button>
      <div className="sub-menu absolute right-0 bg-[#FFFFFF] rounded-b-[8px] top-[calc(100%)] min-h-[150px] w-[180px] border shadow-[0_2px_4px_0px_rgba(0,0,0,0.1)]">
        <div className="grid grid-cols-1">
          {accountMenu.map((item, index) => (
            <Link
              href={`${item.url}`}
              prefetch={false}
              key={index}
              className="p-[10px] text-left hover:text-primary text-neutral-black-87 text-[14px] leading-[16px] font-normal border-b"
            >
              {item.name}
            </Link>
          ))}

          <button
            type="button"
            onClick={() => {
              setUser(null);
              setUserToken(null);
              userLogout();
            }}
            className="p-[10px] text-left hover:text-primary text-neutral-black-87 text-[13px] leading-[16px] font-normal"
          >
            Logout
          </button>
        </div>
      </div>
    </div>
  ) : (
    <Link
      prefetch={false}
      href="/login"
      className="flex gap-2 items-center flex-shrink-0 text-[15px] font-medium text-neutral-black-87"
    >
      <div className="flex items-center justify-center w-7 h-7 lg:w-9 lg:h-9 border border-neutral-black-87 rounded-full">
        <UserIcon />
      </div>
      <div className="group lg:block hidden">
        <span className="block uppercase font-medium text-xs text-[#8d93a5]">
          account
        </span>
        <p className="font-medium text-sm text-neutral-black-87 hover:text-primary">
          Sign In / Register
        </p>
      </div>
    </Link>
  );
}