brackt/app/components/ui/team-owner-badge.tsx

import { getAvatarColor } from "~/lib/color-hash";

interface TeamOwnerBadgeProps {
  teamName: string;
  ownerName?: string;
  align?: "left" | "right"; // right = avatar on the right side for the right column
}

export function TeamOwnerBadge({
  teamName,
  ownerName,
  align = "left",
}: TeamOwnerBadgeProps) {
  const initial = teamName.charAt(0).toUpperCase();
  const colorClass = getAvatarColor(teamName);

  const avatar = (
    <div
      className={`h-6 w-6 rounded-full ${colorClass} text-white text-xs font-bold flex items-center justify-center shrink-0`}
    >
      {initial}
    </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>
  );
}