import React from 'react';
import { Box } from './Box';
import { Image } from './Image';
import { Users } from 'lucide-react';
import { Icon } from './Icon';

export interface TeamLogoProps {
  teamId?: string;
  src?: string;
  alt: string;
  size?: number;
  className?: string;
  border?: boolean;
  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
}

export function TeamLogo({ 
  teamId, 
  src, 
  alt, 
  size = 48, 
  className = '',
  border = true,
  rounded = 'md',
}: TeamLogoProps) {
  const logoSrc = src || (teamId ? `/media/teams/${teamId}/logo` : undefined);

  return (
    <Box
      display="flex"
      alignItems="center"
      justifyContent="center"
      rounded={rounded}
      overflow="hidden"
      bg="bg-charcoal-outline/10"
      border={border}
      borderColor="border-charcoal-outline/50"
      className={className}
      style={{ width: size, height: size, flexShrink: 0 }}
    >
      {logoSrc ? (
        <Image
          src={logoSrc}
          alt={alt}
          className="w-full h-full object-contain p-1"
          fallbackSrc="/default-team-logo.png"
        />
      ) : (
        <Icon icon={Users} size={size > 32 ? 5 : 4} color="text-gray-500" />
      )}
    </Box>
  );
}