import React from 'react';
import { cn } from '@/utils';
import {
  Doubao,
  Qwen,
  ModelScope,
  OpenAI,
  Midjourney,
  Google,
  Kling,
  Minimax,
  Flux,
  Runway,
  Vidu,
  Jimeng,
  Volcengine,
  AlibabaCloud,
  Anthropic,
  Moonshot
} from '@lobehub/icons';

interface ProviderIconProps {
  provider: string;
  className?: string;
}

// Icon mapping based on provider or explicit ID
// Reference: frontend/src/store/modelStore.ts
const ICON_MAP: Record<string, any> = {
    'dashscope': Qwen,
    'volcengine': Volcengine,
    'modelscope': ModelScope,
    'openai': OpenAI,
    'midjourney': Midjourney,
    'google': Google,
    'kling': Kling,
    'minimax': Minimax,
    'flux': Flux,
    'runway': Runway,
    'vidu': Vidu,
    'jimeng': Jimeng,
    'anthropic': Anthropic,
    'moonshot': Moonshot,
    'aliyun': AlibabaCloud,
};

export const ProviderIcon: React.FC<ProviderIconProps> = ({ provider, className }) => {
  const normalizedProvider = provider?.toLowerCase() || '';
  
  // Default to Qwen if not found, consistent with modelStore.ts
  const IconComponent = ICON_MAP[normalizedProvider] || Qwen; 

  return (
    <IconComponent className={cn("w-full h-full", className)} />
  );
};
