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';
import { AvatarMedia } from '@/components/AvatarMedia';
interface IProps {
  agent: TAgentDetail|null
  haveBg: boolean
}
export default ({haveBg, agent}:IProps) => { 
  const nameStyle = haveBg ? 'text-white' : 'text-black'
  const entStyle = haveBg ? 'text-white' : 'text-black-45'
  const renderContent = () => {
    return <>
        <View className="rounded-full overflow-hidden w-28 h-28">
          <AvatarMedia source={agent?.avatarLogo || ''} className='w-28 h-28'></AvatarMedia>
        </View>
        <View className="flex flex-col flex-1 gap-4">
          <View className="flex items-center gap-4">
            <View className={`text-12 font-medium leading-12 ${nameStyle}`}>{agent?.name}</View>
            {agent?.isEnt && <View className="text-12 leading-12"><IconCertificateColor/></View>}
          </View>
          {agent?.entName && <View className="flex items-center gap-2">
            <View className={`text-12 leading-12 truncate max-w-[180px] ${entStyle}`}>
              {agent?.entName}
            </View>
          </View>}
        </View>
    </>
    // return <>
    //     <View className="rounded-full overflow-hidden w-60 h-60">
    //       <AvatarMedia source={agent?.avatarLogo || ''} className='w-60 h-60'></AvatarMedia>
    //     </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>
  )
}