import { TeamLogo } from '@/components/teams/TeamLogo';
import { Text } from '@/ui/Text';
import { BadgeGroup } from '@/ui/BadgeGroup';
import { Group } from '@/ui/Group';
 
interface TeamIdentityProps {
  name: string;
  logoUrl: string;
  performanceLevel?: string;
  category?: string;
}
 
export function TeamIdentity({ name, logoUrl, performanceLevel, category }: TeamIdentityProps) {
  return (
    <Group gap={3}>
      <TeamLogo src={logoUrl} alt={name} size={40} />
      <Group direction="col" align="start" gap={1} fullWidth>
        <Text weight="semibold" variant="high" block truncate>{name}</Text>
        {(performanceLevel || category) && (
          <BadgeGroup>
            {performanceLevel && (
              <Text size="xs" variant="low">{performanceLevel}</Text>
            )}
            {category && (
              <Text size="xs" variant="primary">{category}</Text>
            )}
          </BadgeGroup>
        )}
      </Group>
    </Group>
  );
}