import Head1 from '../public/Head1.png'
import ProductCard from '@/components/ProductCard'

export default function Category({ products, title }) {
    const productCards = products.map((product) => {
        return <ProductCard 
            image={product.images[0].path}
            title={product.title}
            id={product.id}
            key={product.id}
        />
    })
    return(
        <div className="flex flex-col items-center rounded-3xl w-full" >
            <span className="text-4xl p-8 text-white">{ title }</span>
            <div className="w-full flex basis-1/3 justify-center flex-wrap space-y-6">
                {productCards}
            </div>
        </div>
    ) 
}