/* eslint-disable @next/next/no-img-element */
import { auth } from "@/auth";
import { UserCircleIcon } from "@heroicons/react/24/solid";
import { FC } from "react";
import { UserMenu } from "./menu";

export const User: FC = async () => {
  const session = await auth();
  return (
    <UserMenu signedIn={!!session?.user}>
      <div className="flex gap-2 items-center">
        {session?.user?.image ? (
          <img
            src={session.user.image}
            alt="user avatar"
            className="rounded-full w-12"
          />
        ) : (
          <span className="w-12 h-12 inline-block">
            <UserCircleIcon className="w-full h-full" />
          </span>
        )}
        {session?.user?.name ? (
          <span>Hey there, {session.user.name}!</span>
        ) : (
          <a className="block flex-grow h-full" href="/sign-in">
            Sign In
          </a>
        )}
      </div>
    </UserMenu>
  );
};