import React from 'react'
import { TrafficContact } from './type'
import { ChatSvg } from '../../assets/svg/chatSvg'
import { CallOutlineSvg } from '../../assets/svg/callIconSvg'

interface TrafficContactDetail {
    contactDetail: TrafficContact[]
    onClickCall: Function
    onClickChat: Function
    trafficAgent?: string
    speaks?: string
}

export const ContactCard = (props: TrafficContactDetail) => {
    const { contactDetail, onClickCall, onClickChat, trafficAgent = 'Traffic agent', speaks = 'Speaks' } = props
    return (
        <>
            {contactDetail?.map((contact: TrafficContact) => {
                const { name, language, mobile, user_id,truck_type } = contact
                return (
                    <div key={mobile} className='fr-call-card'>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <div>
                                <h4 className='fr-font-regular' style={{ color: '#616161', marginBottom: '6px', fontSize: '11px' }}>
                                    {trafficAgent} ({truck_type})
                                </h4>
                                <h4 className='fr-font-regular' style={{ color: '#212121', marginBottom: '0px', fontSize: '13px', fontWeight: 500 }}>
                                    {name} 
                                </h4>
                            </div>
                            <div style={{ display: 'flex', gap: '10px' }}>
                                <div
                                    className="fr-call-icon"
                                    onClick={() => onClickChat(user_id)}
                               
                                >
                                    <ChatSvg />
                                </div>
                                <div
                                    className="fr-call-icon"
                                    onClick={() => onClickCall(mobile)}
                             
                                >
                                    <CallOutlineSvg />
                                </div>
                            </div>
                        </div>

                        {language && (
    <div>
        <div style={{ width: '100%', height: '1px', backgroundColor: '#E0E0E0', margin: '10px 0' }} />
        <h5 className="fr-font-regular" style={{ color: "#616161", fontSize: "12px" }}>
            {speaks} <span style={{ color: '#212121', marginBottom: '0px', fontSize: '11px', fontWeight: 500 }}>{language}</span>
        </h5>
    </div>
)}


                    </div>
                )
            })}
        </>
    )
}