import React from "react";
import Avatar from "@/components/avatar";
import { cn } from "@/lib/utils";
import type { Player } from "@/server/db/schema";
import LobbyPlayerOptions from "./player-options";

function LobbyPlayerCard({
  lobbyId,
  player,
  children,
  className,
  highlight,
  showOptions = false,
}: {
  lobbyId: string;
  player: Player;
  children?: React.ReactNode;
  className?: string;
  highlight?: boolean;
  showOptions?: boolean;
}) {
  return (
    <div
      className={cn(
        "container-bg flex items-center justify-between gap-2 p-4",
        highlight &&
          "before:bg-primary/40 before:absolute before:inset-0 before:-z-10 before:w-1/3 before:animate-pulse before:rounded-md before:blur-xl",
        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}
      {showOptions && <LobbyPlayerOptions lobbyId={lobbyId} player={player} />}
    </div>
  );
}

export default LobbyPlayerCard;
