import { Star } from "lucide-react";
import { TeamAvatar } from "~/components/TeamAvatar";

interface RankingsRowProps {
  teamId: string;
  teamName: string;
  participantName: string;
  ownerName?: string | null;
  isOwned: boolean;
  rankLabel?: string | number;
  points?: number;
  showPoints: boolean;
  rowClass: string;
}

export function RankingsRow({
  teamId,
  teamName,
  participantName,
  ownerName,
  isOwned,
  rankLabel,
  points,
  showPoints,
  rowClass,
}: RankingsRowProps) {
  return (
    <div className={rowClass}>
      <div className="flex items-center gap-3 flex-1 min-w-0">
        <TeamAvatar teamId={teamId} teamName={teamName} />
        <div className="min-w-0">
          <p className={`font-medium text-sm leading-tight truncate${isOwned ? " text-electric" : ""}`}>
            {participantName}
            {isOwned && <Star className="inline ml-1.5 h-3 w-3 fill-current text-electric" />}
          </p>
          {ownerName && (
            <p className="text-xs text-muted-foreground truncate">{ownerName}</p>
          )}
        </div>
      </div>
      {(rankLabel !== undefined || showPoints) && (
        <div className="flex items-center gap-4 w-full border-t border-border/30 pt-2 mt-1 sm:w-auto sm:border-0 sm:pt-0 sm:mt-0 sm:shrink-0">
          {rankLabel !== undefined && (
            <div className="text-right shrink-0 flex-1 sm:flex-none">
              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Rank</p>
              <span className="text-2xl font-bold leading-none">{rankLabel}</span>
            </div>
          )}
          {showPoints && rankLabel !== undefined && (
            <div className="h-8 w-px bg-border shrink-0 self-center" />
          )}
          {showPoints && (
            <div className="text-right shrink-0 flex-1 sm:flex-none">
              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Points</p>
              <span className="text-2xl font-bold leading-none text-electric">{points ?? 0}</span>
            </div>
          )}
        </div>
      )}
    </div>
  );
}