import { Image } from '@/ui/Image';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';

interface TeamIdentityProps {
  name: string;
  logoUrl: string;
  performanceLevel?: string;
  category?: string;
}

export function TeamIdentity({ name, logoUrl, performanceLevel, category }: TeamIdentityProps) {
  return (
    <Stack direction="row" align="center" gap={3}>
      <Stack width="10" height="10" rounded="lg" overflow="hidden" border borderColor="border-charcoal-outline">
        <Image
          src={logoUrl}
          alt={name}
          width={40}
          height={40}
          fullWidth
          fullHeight
          objectFit="cover"
        />
      </Stack>
      <Stack flex={1}>
        <Text weight="semibold" color="text-white" block truncate>{name}</Text>
        {(performanceLevel || category) && (
          <Stack direction="row" align="center" gap={2} mt={1} wrap>
            {performanceLevel && (
              <Text size="xs" color="text-gray-500">{performanceLevel}</Text>
            )}
            {category && (
              <Stack direction="row" align="center" gap={1}>
                <Stack width="1.5" height="1.5" rounded="full" bg="bg-primary-blue" opacity={0.5} />
                <Text size="xs" color="text-primary-blue">{category}</Text>
              </Stack>
            )}
          </Stack>
        )}
      </Stack>
    </Stack>
  );
}