import Link from "next/link";
import React from "react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import Avatar from "@/components/avatar";
import { Edit, Eye, LogOut } from "lucide-react";
import { cn } from "@/lib/utils";
import type { Player } from "@/server/db/schema";
import { appRoutes } from "@/config/app.routes";

function UserPopover({ player }: { player: Player }) {
  const dropdownItemClassName = " flex items-center gap-1 ";
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        <Avatar
          src={player.avatar!}
          fb={player.displayName!}
          className="border-border/20 size-10 cursor-pointer border-2"
        />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel className="w-32 truncate overflow-hidden font-bold">
          {player.displayName}
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem className={dropdownItemClassName} asChild>
          <Link href={appRoutes.me}>
            <Eye className="size-4 text-white" />
            View Profile
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem className={dropdownItemClassName} asChild>
          <Link href={appRoutes.editProfile}>
            <Edit className="size-4 text-white" />
            Edit Profile
          </Link>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem
          className={cn(
            dropdownItemClassName,
            "group focus:border-destructive focus:text-destructive border border-transparent focus:font-bold",
          )}
          asChild
        >
          <Link href={appRoutes.signOut}>
            <LogOut className="group-focus:text-destructive size-4 text-white" />
            Log out
          </Link>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export default UserPopover;