import React from 'react'
import ProductCard from '../cards/ProductCard'
import { getProducts } from '@/app/lib/api'
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

const ProductSect = async () => {
    const product = await getProducts();
    return (
        <div className='py-12 bg-contain bg-[#e6eaeb] relative'
        // style={{ backgroundImage: "url('/img/product-bg.jpg')" }}
        >
            {/* <img className='absolute opacity-80 lg:max-w-62 max-w-36 animate-pulse bottom-0 right-0' src={`${BASE_URL}/img/car.png`} alt="product-bg" /> */}
            <div className="container relative z-[1]">
                <div className="mb-2">
                    <p className="flex items-center gap-3 text-amber-600 font-semibold text-sm uppercase tracking-wide mx-auto w-fit">
                        <span className="h-[1px] w-8 bg-amber-300"></span>
                        Our Products
                        <span className="h-[1px] w-8 bg-amber-300"></span>
                    </p>
                    <p className="text-2xl lg:text-3xl font-semibold text-gray-800 mb-6 text-center">
                        Explore Our Stunning Product Range
                    </p>
                </div>
                <div className="grid md:grid-cols-3 lg:grid-cols-3 sm:grid-cols-2 gap-5">
                    {
                        product.length > 0 &&
                        product.map((value, index) => (
                            <ProductCard key={index} product={value} />
                        ))
                    }
                </div>
            </div>
        </div>
    )
}

export default ProductSect