"use client";

import { useUser } from "@clerk/nextjs";
import { UserButton } from "@clerk/nextjs";
import { useSidebar } from "@/components/ui/sidebar";

export function NavUser() {
  const { user } = useUser();
  const { state } = useSidebar();
  const isCollapsed = state === "collapsed";

  return (
    <div className="flex items-center gap-2 px-2 py-1.5">
      <UserButton afterSignOutUrl="/sign-in" />
      {!isCollapsed && (
        <div className="grid flex-1 text-left text-sm leading-tight overflow-hidden">
          <span className="truncate font-medium">{user?.fullName}</span>
          <span className="truncate text-xs text-muted-foreground">
            {user?.primaryEmailAddress?.emailAddress}
          </span>
        </div>
      )}
    </div>
  );
}
