import React from 'react';
import { Box } from './Box';
import { Stack } from './Stack';
import { Text } from './Text';
import { Image } from './Image';

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}>
      <Box width="10" height="10" rounded="lg" overflow="hidden" border borderColor="border-charcoal-outline">
        <Image
          src={logoUrl}
          alt={name}
          width={40}
          height={40}
        />
      </Box>
      <Box 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}>
                <Box 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>
        )}
      </Box>
    </Stack>
  );
}