/**
 * TrackImage
 *
 * Pure UI component for displaying track images.
 * Renders an optimized image with fallback on error.
 */

import React from 'react';
import { Image } from './Image';

export interface TrackImageProps {
  trackId: string;
  alt: string;
  className?: string;
}

export function TrackImage({ trackId, alt, className = '' }: TrackImageProps) {
  return (
    <Image
      src={`/media/tracks/${trackId}/image`}
      alt={alt}
      width={800}
      height={256}
      className={`w-full h-64 object-cover ${className}`}
      onError={(e) => {
        // Fallback to default track image
        (e.target as HTMLImageElement).src = '/default-track-image.png';
      }}
    />
  );
}