import { teamFlag } from '@/lib/teams';
import { cn } from '@/lib/cn';
import type { TeamSlot } from '@/lib/types';

/** A team identity (flag + name) or, for an unresolved knockout slot, a muted
 *  placeholder label ("Runner-up Group A"). */
export function TeamLabel({
  slot,
  align = 'left',
  className,
}: {
  slot: TeamSlot;
  align?: 'left' | 'right';
  className?: string;
}) {
  const right = align === 'right';
  if (!slot.team) {
    return (
      <span
        className={cn('truncate text-sm italic text-faint', right && 'text-right', className)}
        title={slot.label}
      >
        {slot.label}
      </span>
    );
  }
  return (
    <span
      className={cn(
        'flex min-w-0 items-center gap-2',
        right && 'flex-row-reverse',
        className,
      )}
    >
      <span aria-hidden className="text-lg leading-none">{teamFlag(slot.team)}</span>
      <span className="truncate font-medium text-ink">{slot.team}</span>
    </span>
  );
}