'use client'
import { ArrowLeft } from 'iconsax-react'
import Image from 'next/image'
import { Swiper, SwiperSlide } from 'swiper/react'
import DanakSuggestedService from './DanakSuggestedService'
import { FC } from 'react'
import DanakServices from './DanakServices'
import { useGetSliderProducts } from './hooks/useProductData'
import Link from 'next/link'

const Products: FC = () => {

    const getSliderProducts = useGetSliderProducts()

    return (
        <div className='max-w-maxWidth mx-auto'>
            <div className='flex justify-between mt-20 items-center'>
                <h1 className='text-2xl font-bold'>
                    محصولات
                </h1>
                <div className='max-w-[320px] text-sm leading-6 hidden xl:block text-center xl:text-right'>
                    ارائه راهکارهای مبتنی بر تکنولوژی نوآورانه برای بهبود کسب‌وکار، افزایش بهره‌وری و رشد پایدار .
                </div>
            </div>

            <div className='mt-20'>
                <Swiper
                    className='w-full'
                    spaceBetween={15}
                    slidesPerView={'auto'}
                >
                    {
                        getSliderProducts.data?.data?.danakServices?.map((item) => {
                            return (
                                <SwiperSlide key={item.id} className='xl:max-w-[45%] max-w-[90%]'>
                                    <div className='rounded-4xl overflow-hidden relative'>
                                        <Link href={`/products/${item.id}`}>
                                            <Image
                                                src={item.images[0].imageUrl}
                                                alt='product'
                                                width={1080}
                                                height={1080}
                                                className='w-full h-[400px] object-cover'
                                            />
                                        </Link>

                                        <div className='absolute bottom-0 left-0 w-full modalGlass3 h-[150px]  rounded-b-3xl text-white p-4'>
                                            <div className='flex justify-between items-center'>
                                                <h6 className='text-xs'>
                                                    {item.name}
                                                </h6>

                                                <div className='h-8 bg-black text-white rounded-xl text-sm px-5 flex items-center'>
                                                    {item.category.title}
                                                </div>
                                            </div>
                                            <div className='mt-6 flex justify-between items-end'>
                                                <div className='flex gap-4'>
                                                    <div className='size-14 overflow-hidden rounded-2xl'>
                                                        <Image src={item.icon} alt='product' width={1080} height={1080} className='w-full h-full object-cover' />
                                                    </div>
                                                    <div>
                                                        <h2 className='text-xl font-bold'>
                                                            {item.title}
                                                        </h2>
                                                        <div className='mt-1'>
                                                            <h6 className='text-sm'>
                                                                داناک
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <Link href={`/products/${item.id}`}>
                                                    <div className='flex gap-1.5 text-sm items-center'>
                                                        <div>جزییات</div>
                                                        <ArrowLeft
                                                            size={20}
                                                            color='white'
                                                        />
                                                    </div>
                                                </Link>
                                            </div>
                                        </div>
                                    </div>
                                </SwiperSlide>
                            )
                        })
                    }
                </Swiper>
            </div>

            <DanakSuggestedService />

            <DanakServices />
        </div>
    )
}

export default Products