/**
 * SponsorLogo
 *
 * Pure UI component for displaying sponsor logos.
 * Renders an optimized image with fallback on error.
 */

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

export interface SponsorLogoProps {
  sponsorId: string;
  alt: string;
  className?: string;
}

export function SponsorLogo({ sponsorId, alt, className = '' }: SponsorLogoProps) {
  return (
    <Image
      src={`/media/sponsors/${sponsorId}/logo`}
      alt={alt}
      width={100}
      height={100}
      className={`object-contain ${className}`}
      onError={(e) => {
        // Fallback to default logo
        (e.target as HTMLImageElement).src = '/default-sponsor-logo.png';
      }}
    />
  );
}