'use client'
import SectionHeader from '@/components/SectionHeader'
import ServiceItem from '@/components/ServiceItem'
import { clx } from '@/helpers/utils'
import { FC, useState } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { useGetCategories, useGetServicesByCategory } from './hooks/useProductData'
import Image from 'next/image'
const DanakServices: FC = () => {

    const [categoryId, setCategoryId] = useState<string>('')
    const { data: categories } = useGetCategories()
    const { data } = useGetServicesByCategory(categoryId)

    return (
        <div className='xl:mt-24 mt-12 max-w-maxWidth mx-auto'>
            <SectionHeader
                title='سرویس های داناک'
            />

            <div className='mt-6'>
                <Swiper
                    className='w-full'
                    spaceBetween={15}
                    slidesPerView='auto'
                >
                    <SwiperSlide className='max-w-[158px]'>
                        <div onClick={() => setCategoryId('')} className={clx(
                            'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center',
                            '' === categoryId && 'bg-white'
                        )}>
                            <div className='text-sm'>
                                همه
                            </div>
                        </div>
                    </SwiperSlide>
                    {
                        categories?.data?.categories?.map((item) => {
                            return (
                                <SwiperSlide className='max-w-[158px]' key={item.id}>
                                    <div onClick={() => setCategoryId(item.id)} className={clx(
                                        'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center',
                                        item.id === categoryId && 'bg-white'
                                    )}>
                                        <div className='size-5 rounded-full overflow-hidden bg-blue-100'>
                                            <Image src={item.icon} alt={item.title} width={20} height={20} />
                                        </div>
                                        <div className='text-sm'>
                                            {item.title}
                                        </div>
                                    </div>
                                </SwiperSlide>
                            )
                        })
                    }
                </Swiper>
            </div>

            <div className='xl:mt-16 mt-10 flex flex-wrap gap-8'>
                {data?.data?.services?.map((item) => {
                    return (
                        <div key={item.id} className='xl:min-w-[30%] min-w-[70%] flex-1'>
                            <ServiceItem
                                isShort
                                item={item}
                            />
                        </div>
                    )
                })}

                <div className='xl:min-w-[30%] min-w-[70%] flex-1'></div>
                <div className='xl:min-w-[30%] min-w-[70%] flex-1'></div>
            </div>
        </div>
    )
}

export default DanakServices