import { Calendar, CallCalling, Location, Map1, MessageMinus, Profile, Setting2, Sms } from 'iconsax-react'
import { FC } from 'react'
import { useParams } from 'react-router-dom'
import { useGetCompanyDetail } from '../home/hooks/useHomeData'
import moment from 'moment-jalaali'
import Products from './components/Products'
const CompanyDetail: FC = () => {

    const { id } = useParams()
    const { data } = useGetCompanyDetail(id || '')

    return (
        <div className='mt-4 pb-20'>
            <img
                src={data?.data?.company?.coverImageUrl}
                className='w-full h-[220px] rounded-xl'
            />
            <div className='p-6 bg-white rounded-xl -mt-4 relative'>
                <div className='flex gap-3'>
                    <img
                        src={data?.data?.company?.profileImageUrl}
                        className='size-14 rounded-xl object-cover'
                    />
                    <div className='flex-1 items-center flex justify-between '>
                        <div className='text-xs'>
                            {data?.data?.company?.name}
                        </div>
                        <a href={data?.data?.company?.mapAddressLink} target='_blank' className='flex items-center gap-1.5 text-xs'>
                            <Map1
                                size={20}
                                color='black'
                            />
                            <div className='text-xs'>
                                آدرس در نقشه
                            </div>
                        </a>
                    </div>
                </div>

                <div className='mt-5 text-[10px]'>
                    <div className='flex justify-between'>
                        <div className='flex gap-1 items-center'>
                            <Profile
                                size={18}
                                color='black'
                            />
                            <div>
                                مدیرعامل: {data?.data?.company?.chiefExecutiveOfficer}
                            </div>
                        </div>
                        <div className='flex gap-1 items-center'>
                            <Setting2
                                size={18}
                                color='black'
                            />
                            <div>
                                صنعت : {data?.data?.company?.industry?.title}
                            </div>
                        </div>
                    </div>
                    <div className='flex justify-between mt-4'>
                        <div className='flex gap-1 items-center'>
                            <CallCalling
                                size={18}
                                color='black'
                            />
                            <div>
                                شماره تماس : {data?.data?.company?.phone}
                            </div>
                        </div>
                        <div className='flex gap-1 items-center'>
                            <MessageMinus
                                size={18}
                                color='black'
                            />
                            <div>
                                شناسه ملی : {data?.data?.company?.identificationNumber}
                            </div>
                        </div>
                    </div>
                    <div className='flex justify-between mt-4'>
                        <div className='flex gap-1 items-center'>
                            <Sms
                                size={18}
                                color='black'
                            />
                            <div>
                                ایمیل : {data?.data?.company?.email}
                            </div>
                        </div>
                        <div className='flex gap-1 items-center'>
                            <Calendar
                                size={18}
                                color='black'
                            />
                            <div>
                                تاریخ تاسیس : {moment(data?.data?.company?.dateOfEstablishment, 'jYYYY/jMM/jDD').format('jYYYY/jMM/jDD')}
                            </div>
                        </div>
                    </div>

                    <div className='flex gap-2 mt-4'>
                        <Location
                            size={18}
                            color='black'
                        />
                        <div>
                            آدرس : {data?.data?.company?.address}
                        </div>
                    </div>
                </div>
            </div>

            <Products />
        </div>
    )
}

export default CompanyDetail