import { View } from '@tarojs/components'
import IconCertificateColor from "@/components/icon/icon-certificate-color";
import { TAgent } from '@/types/agent'
import { AvatarMedia } from '@/components/AvatarMedia';
interface Props {
  data: TAgent
  onClick?: (data: TAgent)=>void
  renderRight?: ()=> JSX.Element | JSX.Element[]
  className?: string
}
const Index = ({onClick, data, className, renderRight}: Props)=> {
  const hasEntName = !!data.entName?.length
  const hasPosition = !!data.position?.length
  const renderPosition = ()=> {
    return <>
        {(hasPosition && hasEntName) && <>&nbsp;|&nbsp;</>}
        {hasPosition && <>{data.position}</>}
    </>
  }

  return (
    <View className={`flex items-center gap-8 ${className}`} onClick={()=>{onClick?.(data)}}>
      <View className='shrink-0 self-start w-50 h-50'>
        <AvatarMedia source={data.avatarUrl ?? ''} className='w-50 h-50' mode="aspectFill" />
      </View>
      <View className={`flex flex-col m-h-50`}>
        <View className="text-20 font-semibold font-pingfangSCSemibold leading-30">{data.name}</View>
        {(hasPosition || hasEntName) && <View className="text-12 leading-20 text-gray-4 gap-4">
          {data.entName || ''}{renderPosition()}{!!data.isEnt && <View className="certification-container  transform translate-y-2"><IconCertificateColor /></View>}
        </View>}
      </View>
      {renderRight && renderRight()}
    </View>
  )
}

export default Index
