import { useEffect, useState } from 'react'
import { get } from '@/api1/apiUtils';
import CustomImage from '@/helper/customImage';
import Link from 'next/link';
import { CustomCarouselMain } from '@/views/carousel/EmblaCarousel';



const ProductList = () => {
    return (
        <div className="container-fluid-1">
            <div className='property-box-vw'>
                <div>
                    <h6 style={{ color: 'rgb(224, 6, 6)' }}><b>Cheapest Product</b></h6>
                    <h2><b>Some of Our Famous Product</b></h2>
                </div>
                {/* <div>
          <button className='feat-explr-btns'>EXPLORE ALL <i className="bi bi-arrow-right"></i></button>
        </div> */}
            </div>

            <ProductBoxDetails />

        </div>
    )
};

export default ProductList;

const ProductBoxDetails = () => {
    const [productList, setProductList] = useState([]);

    useEffect(() => {

        async function fetchProductList() {
            const res = await get("/products?page=1&size=10") as any;
            // console.log(res?.results);
            setProductList(res?.data)
        }

        fetchProductList();

    }, []);




    return (
        <CustomCarouselMain>
            {
                productList?.length > 0 && productList?.map((p: any) => {
                    return (
                        <Link href={`#`} style={{ margin: '8px', cursor: 'pointer' }} key={p?.id} className='slider-card-outer'>
                        <div className="slder-contentbox">
                            <CustomImage
                                src={p?.images[0]} alt="slider-image" className='img-fluid slder-boximgsize'
                            />
            
            
                            <div className="top-right">
                                <h6 className='mt-2' style={{ fontSize: '14px', fontWeight: '500' }}>10% OFF</h6>
                            </div>
                            <div className="bottom-left">
                                <h6 className='mt-1'>From : ₹{p?.discounted_price}</h6>
                            </div>
                        </div>
                        {/* <div className='d-flex'>
                            <p className='sldr-imgdesrpt'><i className="bi bi-houses-fill" style={{ color: 'var(--primary-color)' }}></i> {p?.total_rooms} Rooms</p>
                            <p className='sldr-imgdesrpt ms-2'><i className="bi bi-people-fill" style={{ color: 'var(--primary-color)' }}></i> {p?.total_capacity} Guests</p>
                        </div> */}
            
                        <h3 className='slder-title-sz' style={{width:'340px',fontSize:'18px'}}>{p?.name}</h3>
                        {/* <p className='slder-para-titlefnt d-flex gap-10px'>
                            {
                                p?.amenities?.length > 0 && p?.amenities?.slice(0, 2).map((am: any) => {
                                    return (
                                        <p className='sldr-imgdesrpt'>{am}</p>
                                    )
                                })
                            }
            
                        </p> */}
                    </Link>
                    )
                })
            }

        </CustomCarouselMain>
    )
}

// const SliderBoxImage = ({ p }: { p: any }) => {


//     return (

      

//     )
// }