import { FC, useState } from 'react'
import { Link } from 'react-router-dom'
import { useGetCompanies, useGetIndustry } from '../home/hooks/useHomeData'
import { buildPath, clx } from '../../helpers/utils'
import { Building } from 'iconsax-react'
import { CompanyItemType, IndustryItemType } from '../home/types/HomeTypes'
import { Pages } from '../../config/Pages'

const CompanyList: FC = () => {

    const [activeIndustry, setActiveIndustry] = useState<string>('')
    const { data: industry } = useGetIndustry()
    const { data: companies } = useGetCompanies(activeIndustry)

    return (
        <div>
            <div className='flex gap-2 mt-4 overflowX'>
                <div className={clx(
                    'h-9 bg-white rounded-full px-5 flex gap-2 items-center cursor-pointer',
                    activeIndustry === '' ? 'bg-opacity-100' : 'bg-opacity-50'
                )} onClick={() => setActiveIndustry('')}>
                    <Building
                        size={20}
                        color='black'
                    />
                    <div className='text-sm'>
                        همه
                    </div>
                </div>
                {
                    industry?.data?.industries?.map((item: IndustryItemType) => {
                        return (
                            <div key={item.id} className={clx(
                                'h-9 bg-white rounded-full px-5 flex gap-2 items-center cursor-pointer',
                                activeIndustry === item.id ? 'bg-opacity-100' : 'bg-opacity-50'
                            )} onClick={() => setActiveIndustry(item.id)}>
                                <img src={item.iconUrl} alt={item.title} className='size-5' />
                                <div className='text-sm'>
                                    {item.title}
                                </div>
                            </div>
                        )
                    })
                }
            </div>

            <div className='mt-6 flex gap-4 flex-wrap'>
                {
                    companies?.data?.companies?.map((item: CompanyItemType) => {
                        return (
                            <Link to={buildPath(Pages.company.detail + item.id)} key={item.id} className='flex-1 gap-2.5 bg-white min-w-[40%] h-20 flex items-center p-2 rounded-xl'>
                                <div className='size-[64px] rounded-xl overflow-hidden'>
                                    <img src={item.profileImageUrl} alt={item.name} className='size-full object-cover' />
                                </div>
                                <div className='text-xs'>
                                    <div>
                                        {item.name}
                                    </div>
                                    <div className='text-description mt-2'>
                                        {item.address}
                                    </div>
                                </div>
                            </Link>
                        )
                    })
                }
            </div>
        </div>
    )
}

export default CompanyList