'use client'

import dynamic from 'next/dynamic'
import type { ComponentType } from 'react'

interface IconProps {
  size?: number
}

/* Dynamic imports — each icon is 'use client' and tree-shaken */
const icons: Record<string, ComponentType<IconProps>> = {
  Anthropic:    dynamic(() => import('@lobehub/icons/es/Anthropic').then(m => ({ default: m.default.Avatar as unknown as ComponentType<IconProps> }))),
  Google:       dynamic(() => import('@lobehub/icons/es/Google').then(m => ({ default: m.default.Avatar as unknown as ComponentType<IconProps> }))),
  OpenAI:       dynamic(() => import('@lobehub/icons/es/OpenAI').then(m => ({ default: m.default.Avatar as unknown as ComponentType<IconProps> }))),
  Meta:         dynamic(() => import('@lobehub/icons/es/Meta').then(m => ({ default: m.default.Avatar as unknown as ComponentType<IconProps> }))),
  xAI:          dynamic(() => import('@lobehub/icons/es/XAI').then(m => ({ default: m.default.Avatar as unknown as ComponentType<IconProps> }))),
  DeepSeek:     dynamic(() => import('@lobehub/icons/es/DeepSeek').then(m => ({ default: m.default.Avatar as unknown as ComponentType<IconProps> }))),
  Moonshot:     dynamic(() => import('@lobehub/icons/es/Moonshot').then(m => ({ default: m.default.Avatar as unknown as ComponentType<IconProps> }))),
  Alibaba:      dynamic(() => import('@lobehub/icons/es/Alibaba').then(m => ({ default: m.default.Avatar as unknown as ComponentType<IconProps> }))),
  'MiniMax AI': dynamic(() => import('@lobehub/icons/es/Minimax').then(m => ({ default: m.default.Avatar as unknown as ComponentType<IconProps> }))),
  zAI:          dynamic(() => import('@lobehub/icons/es/Zhipu').then(m => ({ default: m.default.Avatar as unknown as ComponentType<IconProps> }))),
  Microsoft:    dynamic(() => import('@lobehub/icons/es/Microsoft').then(m => ({ default: m.default.Avatar as unknown as ComponentType<IconProps> }))),
  Amazon:       dynamic(() => import('@lobehub/icons/es/Aws').then(m => ({ default: m.default.Avatar as unknown as ComponentType<IconProps> }))),
  GovTech:      dynamic(() => Promise.resolve({ default: ({ size = 18 }: IconProps) => (
    <img src="/govtech-icon.png" alt="GovTech" width={size} height={size} style={{ objectFit: 'contain', borderRadius: '50%' }} />
  )})),
}

export function LabLogo({ creator, size = 18 }: { creator: string; size?: number }) {
  const Icon = icons[creator]
  if (!Icon) return null
  return <Icon size={size} />
}