import { Link } from "@tanstack/react-router";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import type { Player } from "@/types";

export function PlayerRow({ player, position }: { player: Player; position?: number }) {
  const dot = player.onlineStatus === "in-server" ? "bg-success" : player.onlineStatus === "online" ? "bg-info" : "bg-muted-foreground/40";
  return (
    <Link to="/players/$playerId" params={{ playerId: player.id }} className="flex items-center gap-3 rounded-md p-2 transition-colors hover:bg-accent">
      {position !== undefined && <span className="w-6 text-center font-mono text-xs text-muted-foreground">#{position}</span>}
      <div className="relative">
        <Avatar className="h-8 w-8">
          <AvatarImage src={player.avatar} />
          <AvatarFallback>{player.name[0]}</AvatarFallback>
        </Avatar>
        <span className={`absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border-2 border-card ${dot}`} />
      </div>
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-1.5 truncate text-sm font-medium">
          {player.name}
          {player.privileges[0] && <Badge className="h-4 px-1.5 text-[9px] font-semibold gradient-primary text-primary-foreground">{player.privileges[0]}</Badge>}
        </div>
        <div className="text-xs text-muted-foreground">{player.rank} · {player.country}</div>
      </div>
      <div className="text-right">
        <div className="font-mono text-sm font-semibold text-secondary">{player.rating}</div>
        <div className="text-[10px] uppercase tracking-wider text-muted-foreground">rating</div>
      </div>
    </Link>
  );
}