import { FC, useState } from 'react'
import { useGetCompanyDetail } from '../../home/hooks/useHomeData'
import { useParams } from 'react-router-dom'
import { ProductItemType } from '../types/CompanyTypes'
const Products: FC = () => {

    const { id } = useParams()
    const { data } = useGetCompanyDetail(id || '')
    const [activeTab, setActiveTab] = useState<'products' | 'services' | 'gallery'>('products')

    return (
        <div>
            <div className='mt-6 flex justify-center gap-2 items-center'>
                <div className={`flex cursor-pointer h-8 bg-white px-6 items-center rounded-full text-xs border-2 border-white pt-[1px] ${activeTab === 'products' ? 'bg-opacity-100' : 'bg-opacity-45'}`} onClick={() => setActiveTab('products')}>
                    محصولات
                </div>
                <div className={`flex cursor-pointer h-8 bg-white px-6 items-center rounded-full text-xs border-2 border-white pt-[1px] ${activeTab === 'services' ? 'bg-opacity-100' : 'bg-opacity-45'}`} onClick={() => setActiveTab('services')}>
                    خدمات
                </div>
                {/* <div className={`flex cursor-pointer h-8 bg-white px-6 items-center rounded-full text-xs border-2 border-white pt-[1px] ${activeTab === 'gallery' ? 'bg-opacity-100' : 'bg-opacity-45'}`} onClick={() => setActiveTab('gallery')}>
                    گالری
                </div> */}
            </div>

            {
                activeTab === 'products' && (
                    <div className='flex gap-2 flex-wrap mt-6'>
                        {
                            data?.data?.company?.products?.map((item: ProductItemType) => (
                                <div className='flex-1 gap-2.5 bg-white min-w-[28%] h-20 flex items-center p-2 rounded-xl'>
                                    <div className='size-12 rounded-xl overflow-hidden'>
                                        <img src={item.imageUrl} alt={item.title} className='w-full h-full object-cover' />
                                    </div>
                                    <div className='text-xs'>
                                        <div>
                                            {item.title}
                                        </div>
                                    </div>
                                </div>
                            ))
                        }
                    </div>
                )
            }

            {
                activeTab === 'services' && (
                    <div className='flex gap-2 flex-wrap mt-6'>
                        {
                            data?.data?.company?.services?.map((item: ProductItemType) => (
                                <div className='flex-1 gap-2.5 bg-white min-w-[28%] h-20 flex items-center p-2 rounded-xl'>
                                    <div className='size-12 rounded-xl overflow-hidden'>
                                        <img src={item.imageUrl} alt={item.title} className='w-full h-full object-cover' />
                                    </div>
                                    <div className='text-xs'>
                                        <div>
                                            {item.title}
                                        </div>
                                    </div>
                                </div>
                            ))
                        }
                    </div>
                )
            }
        </div>
    )
}

export default Products