import type { CompoundIcon } from '@cherrystudio/ui'
import { Avatar, AvatarImage } from '@cherrystudio/ui'
import type { FC } from 'react'

interface Props {
  logo: string | object | undefined
  size?: number
  shape?: 'circle' | 'rounded'
  className?: string
}

/**
 * Renders either a CompoundIcon avatar or a plain image avatar,
 * depending on whether the logo is a CompoundIcon or a string URL.
 */
const LogoAvatar: FC<Props> = ({ logo, size = 32, shape = 'rounded', className }) => {
  if (!logo) return null

  const borderClass = 'border border-border'

  if (typeof logo !== 'string') {
    const Icon = logo as CompoundIcon
    return <Icon.Avatar size={size} shape={shape} className={`${borderClass} ${className ?? ''}`.trim()} />
  }

  return (
    <Avatar
      className={`${borderClass} ${shape === 'circle' ? 'rounded-full' : 'rounded-[20%]'} ${className ?? ''}`.trim()}
      style={{ width: size, height: size }}>
      <AvatarImage src={logo} />
    </Avatar>
  )
}

export default LogoAvatar
