
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu"
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { useContext } from "react"
import { AuthContext } from "@/helpers/context/AuthProvider"
import { LogOut } from "lucide-react"
import { routes } from "@/lib/routes"

export default function UserProfileDropDown() {
  const { user , logout } = useContext(AuthContext)
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Avatar className="h-9 w-9">
          <AvatarImage src={user?.pfpName} alt="@shadcn" />
          <AvatarFallback>{user?.firstName}</AvatarFallback>
          <span className="sr-only">Toggle user menu</span>
        </Avatar>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuItem className="font-bold text-lg">{ user?.firstName ?? ''}</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
          <Link href={routes.PROFILE_ROUTE} className="block w-full text-left" prefetch={false}>
            Profile
          </Link>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
          <Button variant="outline" className="flex w-full text-left text-red-500 hover:text-red-300 " onClick={logout}>
            <LogOut  className="text-red-500"/>
            Logout
          </Button>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}