import { avatarColor } from "~/lib/avatar-colors";

interface TeamOwnerBadgeProps {
  teamName: string;
  ownerName?: string;
  align?: "left" | "right";
}

export function TeamOwnerBadge({
  teamName,
  ownerName,
  align = "left",
}: TeamOwnerBadgeProps) {
  const initials =
    teamName
      .split(/\s+/)
      .filter(Boolean)
      .slice(0, 2)
      .map((w) => w[0].toUpperCase())
      .join("") || "?";
  const color = avatarColor(teamName);

  const avatar = (
    <div
      role="img"
      aria-label={teamName}
      className="h-6 w-6 flex shrink-0 items-center justify-center font-bold text-[10px]"
      style={{ backgroundColor: "#000", color }}
    >
      {initials}
    </div>
  );

  const text = (
    <div className={`min-w-0 ${align === "right" ? "text-right" : ""}`}>
      <p className="text-xs font-medium truncate">{teamName}</p>
      {ownerName && (
        <p className="text-xs text-muted-foreground truncate">{ownerName}</p>
      )}
    </div>
  );

  return (
    <div
      className={`flex items-center gap-2 ${align === "right" ? "flex-row-reverse" : ""}`}
    >
      {avatar}
      {text}
    </div>
  );
}