import { Link } from "react-router";

interface TeamNameDisplayProps {
  teamName: string;
  ownerName?: string | null;
  href?: string;
}

/**
 * Displays a team name with optional owner username below it.
 * If href is provided, the team name is rendered as a link.
 */
export function TeamNameDisplay({ teamName, ownerName, href }: TeamNameDisplayProps) {
  return (
    <div className="min-w-0">
      {href ? (
        <Link
          to={href}
          className="font-medium text-sm hover:underline truncate block"
        >
          {teamName}
        </Link>
      ) : (
        <p className="font-medium text-sm truncate">{teamName}</p>
      )}
      {ownerName && (
        <p className="text-xs text-muted-foreground truncate">{ownerName}</p>
      )}
    </div>
  );
}