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

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

export interface TeamLogoProps {
  teamId: string;
  alt: string;
  className?: string;
}

export function TeamLogo({ teamId, alt, className = '' }: TeamLogoProps) {
  return (
    <Image
      src={`/media/teams/${teamId}/logo`}
      alt={alt}
      width={100}
      height={100}
      className={`object-contain ${className}`}
      onError={(e) => {
        // Fallback to default logo
        (e.target as HTMLImageElement).src = '/default-team-logo.png';
      }}
    />
  );
}