import { UserButton } from "@clerk/clerk-react";
import { cn } from "@/lib/utils";

interface Props {
  collapsed?: boolean;
}

const UserMenu = (props: Props) => {
  const { collapsed } = props;

  return (
    <div className={cn("w-auto flex flex-row justify-start items-center", collapsed ? "px-1" : "px-3")}>
      <UserButton
        appearance={{
          elements: {
            avatarBox: "w-8 h-8",
            userButtonPopoverCard: "shadow-xl",
          }
        }}
        afterSignOutUrl="/auth"
        showName={!collapsed}
      />
    </div>
  );
};

export default UserMenu;
