import { SafeImage } from '@/components/shared/SafeImage';
import { Box } from '@/ui/Box';
import { ImagePlaceholder } from '@/ui/ImagePlaceholder';

export interface LeagueCoverProps {
  leagueId?: string;
  src?: string;
  alt: string;
  height?: string;
  aspectRatio?: string;
  className?: string;
}

export function LeagueCover({ 
  leagueId, 
  src, 
  alt, 
  height, 
  aspectRatio = '21/9',
  className = '',
}: LeagueCoverProps) {
  const coverSrc = src || (leagueId ? `/api/media/leagues/${leagueId}/cover` : undefined);

  return (
    <Box
      width="full"
      overflow="hidden"
      bg="bg-charcoal-outline/10"
      className={className}
      style={{ height, aspectRatio: height ? undefined : aspectRatio }}
    >
      {coverSrc ? (
        <SafeImage
          src={coverSrc}
          alt={alt}
          className="w-full h-full object-cover"
          fallbackComponent={<ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />}
        />
      ) : (
        <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
      )}
    </Box>
  );
}