import React from 'react';
import { Box } from '@/ui/Box';
import { SafeImage } from '@/components/shared/SafeImage';
import { Trophy } from 'lucide-react';
import { Icon } from '@/ui/Icon';

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

export function LeagueLogo({ 
  leagueId, 
  src, 
  alt, 
  size = 64, 
  className = '',
  border = true,
  rounded = 'md',
}: LeagueLogoProps) {
  const logoSrc = src || (leagueId ? `/api/media/leagues/${leagueId}/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 ? (
        <SafeImage
          src={logoSrc}
          alt={alt}
          className="w-full h-full object-contain p-1"
          fallbackComponent={<Icon icon={Trophy} size={size > 32 ? 5 : 4} color="text-gray-500" />}
        />
      ) : (
        <Icon icon={Trophy} size={size > 32 ? 5 : 4} color="text-gray-500" />
      )}
    </Box>
  );
}