import { cn } from "@/lib/utils";
import type { Team } from "../types";

type TeamCardProps = {
  team: Team;
  active: boolean;
  score: number;
};

export function TeamCard({ team, active, score }: TeamCardProps) {
  const red = team === "red";

  return (
    <div
      className={cn(
        "pk-team-card flex-1 rounded-lg border-4 p-[clamp(10px,1.6vw,16px)] text-center transition",
        red ? "bg-red-50 text-red-700" : "bg-blue-50 text-blue-700",
        active && (red ? "border-red-400 shadow-lg" : "border-blue-400 shadow-lg"),
        !active && "border-transparent",
      )}
    >
      <div className="pk-team-label text-[clamp(16px,1.8vw,22px)] font-bold">{red ? "🔴 红队" : "🔵 蓝队"}</div>
      <div className="pk-team-score text-[clamp(30px,4vw,48px)] font-black leading-tight">{score}</div>
    </div>
  );
}