import { Box } from '@/ui/Box';
import { Image } from '@/ui/Image';
import { ImagePlaceholder } from '@/ui/ImagePlaceholder';

export interface TrackImageProps {
  trackId?: string;
  src?: string;
  alt: string;
  aspectRatio?: string;
  className?: string;
  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
}

export function TrackImage({ 
  trackId, 
  src, 
  alt, 
  aspectRatio = '16/9',
  className = '',
  rounded = 'lg',
}: TrackImageProps) {
  const imageSrc = src || (trackId ? `/media/tracks/${trackId}/image` : undefined);

  return (
    <Box
      width="full"
      overflow="hidden"
      bg="bg-charcoal-outline/10"
      rounded={rounded}
      className={className}
      style={{ aspectRatio }}
    >
      {imageSrc ? (
        <Image
          src={imageSrc}
          alt={alt}
          className="w-full h-full object-cover"
          fallbackSrc="/default-track-image.png"
        />
      ) : (
        <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
      )}
    </Box>
  );
}