import { Image, View } from '@tarojs/components'

import TagCertificated from "@/components/tag-certificated";
import IconCertificateColor from "@/components/icon/icon-certificate-color";
import { TAgentDetail } from '@/types/agent';
interface IProps {
  size?: 'mini'|'large'
  agent: TAgentDetail|null
}
export default ({size='large', agent}:IProps) => {

  const renderContent = () => {
    if(size === 'mini'){
    return <>
        <View className="rounded-full overflow-hidden w-28 h-28">
          <Image src={agent?.avatarLogo} mode='widthFix' className='w-28 h-28'></Image>
        </View>
        <View className="flex flex-col flex-1 gap-4">
          <View className="flex items-end gap-4">
            <View className="text-12 font-medium leading-12">{agent?.name}</View>
            {agent?.isEnt && <View className="text-12 leading-12"><IconCertificateColor/></View>}
          </View>
          {agent?.entId && <View className="flex items-center gap-2">
            <View className="text-gray-45 text-12 leading-12 truncate max-w-[180px]">
              {agent?.entName}
            </View>
          </View>}
        </View>
    </>
    }
    return <>
        <View className="rounded-full overflow-hidden w-60 h-60">
          <Image src={agent?.avatarLogo} mode='widthFix' className='w-60 h-60'></Image>
        </View>
        <View className="flex flex-col flex-1">
          <View className="flex items-end gap-8">
            <View className="text-24 font-medium leading-32">{agent?.name}</View>
            <View className="text-12 leading-20">{agent?.position}</View>
          </View>
          <View className="flex items-center gap-2">
            <View className="text-12 leading-20 truncate max-w-[188px]">
              {agent?.entName}
            </View>
            {agent?.isEnt && <TagCertificated />}
          </View>
        </View>
    </>
  }
  return (
    <View className="flex items-center gap-8">
      {renderContent()}
    </View>
  )
}