import React from "react";
import Avatar from "../../../components/avatar";
import { cn } from "@/lib/utils";
import { MoreHorizontal } from "lucide-react";
import { Button } from "../../../components/ui/button";
import type { Player } from "@/server/db/schema";

function LobbyPlayerCard({
  player,
  children,
  className,
}: {
  player: Pick<Player, "displayName" | "avatar">;
  children?: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "container-bg flex items-center justify-between gap-2 p-4",
        className,
      )}
    >
      <div className="flex items-center gap-2">
        <Avatar src={player.avatar!} fb={player.displayName!} />
        <h4 className="font-meidum text-xl">{player.displayName}</h4>
      </div>
      {children}
      <Button
        size={"icon"}
        variant={"ghost"}
        className="hover:bg-border/10 hover:text-white"
      >
        <MoreHorizontal />
      </Button>
    </div>
  );
}

export default LobbyPlayerCard;