import { useAuth } from "@/contexts/useAuth";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { User, LogOut } from "lucide-react";
import { FC } from "react";
export const UserDetails: FC = () => {
const { user, logout } = useAuth();
const username = user?.name || "User";
const userEmail = user?.email || "";
return (
<div className="relative">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="w-full text-left">
<div className="flex flex-row items-center gap-3 pl-2 rounded-lg hover:bg-gray-50 transition-colors min-w-0">
<div className="w-9 h-9 bg-pink-500 rounded-full flex items-center justify-center shadow-md flex-shrink-0">
<User className="h-5 w-5 text-white" />
</div>
<div className="flex-1 min-w-0 overflow-hidden">
<div className="text-sm truncate">{username}</div>
<div className="text-sm text-gray-600 truncate">
{userEmail}
</div>
</div>
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-[160px] mt-2 bg-white shadow-[0_6px_20px_0_rgba(30,27,75,0.20)] ml-[5px]"
side="top"
sideOffset={8}
>
<div className="flex flex-col items-center gap-3 bg-white p-2 py-4">
<div className="w-[54px] h-[54px] bg-pink-500 rounded-full flex items-center justify-center shadow-md flex-shrink-0">
<User className="h-7 w-7 text-white" />
</div>
<div className="flex-1 min-w-0 w-full text-center px-2">
<div className="text-md font-semibold truncate pb-1 w-full">
{username}
</div>
<div className="text-xs text-gray-600 truncate w-full">
{userEmail}
</div>
</div>
</div>
<div className="px-2">
<DropdownMenuSeparator />
</div>
<DropdownMenuItem
className="flex items-center gap-2 cursor-pointer focus:bg-transparent focus:text-current"
onClick={() => logout()}
>
<LogOut className="h-4 w-4" />
<span className="text-sm text-gray-600">Log Out</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
};
