import { View, Image } from '@tarojs/components'
import style from './index.module.less'
import { TContactItem } from '@/types/contact'
import { TAgent } from '@/types/agent'
interface Props {
  data: TContactItem|TAgent
  onClick?: (data: TContactItem|TAgent)=>void
  renderRight?: ()=> JSX.Element | JSX.Element[]
  className?: string
}
const Index = ({onClick, data, className, renderRight}: Props)=> {
  return (
    <View className={`${style.contactCard} ${className}`} onClick={()=>{onClick?.(data)}}>
      <View className={style.avatar}>
      {data.avatarUrl && <Image src={data.avatarUrl} className={style.avatarImg} mode="aspectFill"></Image>}
      </View>
      <View className={`${style.infoColumn} truncate`}>
        <View className={style.nameRow}>
          <View className={`${style.nickName} truncate`}>{data.name}</View>
          {/* {data.badges?.map(item=><View className={style.nameMarkup}>{item}</View>)} */}
        </View>
        <View className={`${style.subInfo} truncate`}>{data?.entName}</View>
        <View className={`${style.subInfo} truncate`}>{data?.position}</View>
      </View>
      {renderRight && renderRight()}
    </View>
  )
}

export default Index