'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'

const Products: FC = () => {

    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'}
                >
                    <SwiperSlide className='xl:max-w-[45%] max-w-[90%]'>
                        <div className='rounded-4xl overflow-hidden relative'>
                            <Image
                                src='https://burgeraddict.fr/wp-content/uploads/2024/09/MSG-Smash-Burger-FT-RECIPE0124-d9682401f3554ef683e24311abdf342b.jpg'
                                alt='product'
                                width={1080}
                                height={1080}
                                className='w-full h-[400px] object-cover'
                            />

                            <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'>
                                        منو دیجیتال رستوران
                                    </h6>

                                    <div className='h-8 bg-black text-white rounded-xl text-sm px-5 flex items-center'>
                                        دسته بندی
                                    </div>
                                </div>
                                <div className='mt-6 flex justify-between items-end'>
                                    <div className='flex gap-4'>
                                        <div className='size-14 bg-red-50 rounded-2xl'></div>
                                        <div>
                                            <h2 className='text-xl font-bold'>
                                                دی منو
                                            </h2>
                                            <div className='mt-1'>
                                                <h6 className='text-sm'>
                                                    داناک
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div className='flex gap-1.5 text-sm items-center'>
                                        <div>جزییات</div>
                                        <ArrowLeft
                                            size={20}
                                            color='white'
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </SwiperSlide>
                    <SwiperSlide className='xl:max-w-[45%] max-w-[90%]'>
                        <div className='rounded-4xl overflow-hidden relative'>
                            <Image
                                src='https://burgeraddict.fr/wp-content/uploads/2024/09/MSG-Smash-Burger-FT-RECIPE0124-d9682401f3554ef683e24311abdf342b.jpg'
                                alt='product'
                                width={1080}
                                height={1080}
                                className='w-full h-[400px] object-cover'
                            />

                            <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'>
                                        منو دیجیتال رستوران
                                    </h6>

                                    <div className='h-8 bg-black text-white rounded-xl text-sm px-5 flex items-center'>
                                        دسته بندی
                                    </div>
                                </div>
                                <div className='mt-6 flex justify-between items-end'>
                                    <div className='flex gap-4'>
                                        <div className='size-14 bg-red-50 rounded-2xl'></div>
                                        <div>
                                            <h2 className='text-xl font-bold'>
                                                دی منو
                                            </h2>
                                            <div className='mt-1'>
                                                <h6 className='text-sm'>
                                                    داناک
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div className='flex gap-1.5 text-sm items-center'>
                                        <div>جزییات</div>
                                        <ArrowLeft
                                            size={20}
                                            color='white'
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </SwiperSlide>
                    <SwiperSlide className='xl:max-w-[45%] max-w-[90%]'>
                        <div className='rounded-4xl overflow-hidden relative'>
                            <Image
                                src='https://burgeraddict.fr/wp-content/uploads/2024/09/MSG-Smash-Burger-FT-RECIPE0124-d9682401f3554ef683e24311abdf342b.jpg'
                                alt='product'
                                width={1080}
                                height={1080}
                                className='w-full h-[400px] object-cover'
                            />

                            <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'>
                                        منو دیجیتال رستوران
                                    </h6>

                                    <div className='h-8 bg-black text-white rounded-xl text-sm px-5 flex items-center'>
                                        دسته بندی
                                    </div>
                                </div>
                                <div className='mt-6 flex justify-between items-end'>
                                    <div className='flex gap-4'>
                                        <div className='size-14 bg-red-50 rounded-2xl'></div>
                                        <div>
                                            <h2 className='text-xl font-bold'>
                                                دی منو
                                            </h2>
                                            <div className='mt-1'>
                                                <h6 className='text-sm'>
                                                    داناک
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div className='flex gap-1.5 text-sm items-center'>
                                        <div>جزییات</div>
                                        <ArrowLeft
                                            size={20}
                                            color='white'
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </SwiperSlide>
                </Swiper>
            </div>

            <DanakSuggestedService />

            <DanakServices />
        </div>
    )
}

export default Products