import Image from "next/image"

const CategorySection = ({ categories }) => {
    return (
        <section className="items-center bg-danger-100">
            <div className="grid grid-cols-4 gap-2 w-full h-full col-span-2">
                {categories.map((category) => (
                    <div class="max-w-sm w-fit gap-4 lg:max-w-full lg:flex bg-white px-4 py-2 border-2 border-gray_r-8 rounded-lg">
                        <div className="flex items-center justify-center">
                            <Image src='https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' width={80} height={80} alt={category?.name} />
                        </div>
                        <div class="flex flex-col justify-center leading-normal">
                            <h2 class="text-gray-900 font-bold text-sm">{category?.name}</h2>
                        </div>
                    </div>
                ))}
            </div>
        </section>
    )
}

export default CategorySection