'use client'
import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import Image from 'next/image'

interface Product {
    id: number
    image: string
    name: string
}

interface OrderProductsProps {
    products: Product[]
}

const OrderProducts: React.FC<OrderProductsProps> = ({ products }) => {
    return (
        <div className='flex-1 flex gap-3 sm:gap-4 lg:border-r lg:border-border lg:pr-5 overflow-hidden min-h-[200px] sm:min-h-[225px]'>
            <Swiper
                spaceBetween={12}
                slidesPerView={'auto'}
                className='h-full w-full'
                grabCursor={true}
            >
                {products.map((product) => (
                    <SwiperSlide key={product.id} className='!w-[180px] sm:!w-[200px] lg:!w-[234px]'>
                        <div className='flex w-[180px] sm:w-[200px] lg:w-[234px] h-[180px] sm:h-[200px] lg:h-[234px] flex-col p-4 sm:p-5 lg:p-7 items-center rounded-xl gap-2 border border-border'>
                            <Image
                                src={product.image}
                                className='max-w-[100px] sm:max-w-[120px] lg:max-w-[140px] max-h-[100px] sm:max-h-[120px] lg:max-h-[140px] object-center'
                                alt={product.name}
                                width={100}
                                height={100}
                            />
                            <div className='max-w-[160px] truncate h-full sm:max-w-[180px] lg:max-w-[200px] text-center text-xs sm:text-sm font-light mt-2 sm:mt-4'>
                                {product.name}
                            </div>
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>
        </div>
    )
}

export default OrderProducts
