import React from 'react';
import ModelIcon from '@lobehub/icons/es/features/ModelIcon';
import ProviderIcon from '@lobehub/icons/es/features/ProviderIcon';

export default function LobeModelLogo({
  model,
  provider,
  fallbackSrc = null,
  alt = '',
  size = 28,
  shape = 'square',
  type = 'color',
  style = {},
  className = '',
}) {
  const hasModel = typeof model === 'string' && model.trim().length > 0;
  const hasProvider = typeof provider === 'string' && provider.trim().length > 0;

  try {
    if (hasModel) {
      return (
        <ModelIcon
          model={model}
          size={size}
          shape={shape}
          type={type}
          className={className}
          style={style}
        />
      );
    }

    if (hasProvider) {
      return (
        <ProviderIcon
          provider={provider.toLowerCase()}
          size={size}
          shape={shape}
          type={type}
          className={className}
          style={style}
        />
      );
    }
  } catch {
    // Fall through to local fallback asset.
  }

  if (fallbackSrc) {
    return (
      <img
        src={fallbackSrc}
        alt={alt}
        className={className}
        style={{
          width: size,
          height: size,
          objectFit: 'contain',
          ...style,
        }}
      />
    );
  }

  return (
    <div
      className={className}
      style={{
        width: size,
        height: size,
        borderRadius: shape === 'circle' ? '50%' : 8,
        background: '#F3F4F6',
        border: '1px solid #D1D5DB',
        ...style,
      }}
    />
  );
}