/**
 * Utility functions for handling logo display and styling
 */

/**
 * Checks if a logo URL is from the logoapi service
 */
export const isLogoApiUrl = (url?: string | null): boolean => {
  return Boolean(url?.includes('logoapi.sportcreative.eu'));
};

/**
 * Gets appropriate styling for logos based on their source and container type
 */
export const getLogoStyle = (
  logoUrl?: string | null,
  isCircular: boolean = false,
  size: 'small' | 'medium' | 'large' = 'medium'
): React.CSSProperties => {
  const isLogoApi = isLogoApiUrl(logoUrl);
  
  if (isLogoApi && isCircular) {
    // Add padding for SVG logos in circular containers to prevent cutoff
    const paddingMap = {
      small: '2px',
      medium: '4px',
      large: '6px'
    };
    
    return {
      padding: paddingMap[size],
      boxSizing: 'border-box',
      objectFit: 'contain'
    };
  }
  
  return {
    objectFit: 'contain'
  };
};

/**
 * Gets appropriate className for logo containers
 */
export const getLogoClassName = (
  logoUrl?: string | null,
  isCircular: boolean = false,
  size: 'small' | 'medium' | 'large' = 'medium'
): string => {
  const classes = [];
  
  if (isCircular) {
    classes.push('circular-logo-container');
  }
  
  classes.push(`match-logo-${size}`);
  
  return classes.join(' ');
};

/**
 * Common logo props for Chakra UI Image components
 */
export const getLogoProps = (
  logoUrl?: string | null,
  isCircular: boolean = false,
  size: 'small' | 'medium' | 'large' = 'medium'
) => {
  const sizeMap = {
    small: { boxSize: '24px' },
    medium: { boxSize: '32px' },
    large: { boxSize: '48px' }
  };
  
  return {
    ...sizeMap[size],
    objectFit: 'contain' as const,
    borderRadius: isCircular ? 'full' as const : undefined,
    style: getLogoStyle(logoUrl, isCircular, size),
    className: getLogoClassName(logoUrl, isCircular, size)
  };
};
