import { View, Image } from '@tarojs/components'
import style from './index.module.less'
import { IContactModel,ICharacter } from '@/types/index'
interface Props {
  data: IContactModel|ICharacter
  onClick?: (data: IContactModel|ICharacter)=>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.avatar && <Image src={data.avatar} className={style.avatarImg} mode="aspectFill"></Image>}
      </View>
      <View className={`${style.infoColumn} truncate`}>
        <View className={style.nameRow}>
          <View className={`${style.nickName} truncate`}>{data.alias ?? data.name}</View>
          {data.badges?.map(item=><View className={style.nameMarkup}>{item}</View>)}
        </View>
        <View className={`${style.subInfo} truncate`}>{data.company}</View>
        <View className={`${style.subInfo} truncate`}>{data.job}</View>
      </View>
      {renderRight && renderRight()}
    </View>
  )
}

export default Index