import Image from 'next/image'
import useCategoryHome from '../hooks/useCategoryHome'

const CategoryPilihan = ({ id, categories }) => {
  const { categoryHome } = useCategoryHome({ id })

  return (
    <section>
        <div className='flex flex-row items-center gap-4'>
            <h1>Kategori Pilihan</h1>
            <p className='text-gray_r-10'>total produk</p>
        </div>
        <div className="group/item grid grid-cols-6 gap-2 w-full h-full col-span-2 border">
                {categories.map((category) => (
                    <div className="max-w-sm w-full gap-4 lg:max-w-full flex flex-col bg-white px-4 py-2 border-2 border-gray_r-8 rounded-lg">
                        <div className="group/edit flex items-center justify-center group-hover/item:visible">
                            <Image src='group-hover/ https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' width={80} height={80} alt={category?.name} />
                            <a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}">
                                <span class="group-hover/edit:text-gray-700 ...">Call</span>
                            </a>
                        </div>
                        <div className="flex flex-col justify-center leading-normal items-center">
                            <h2 className="text-gray-900 font-bold text-sm items-center text-center">{category?.name}</h2>
                        </div>
                    </div>
                ))}
            </div>
    </section>
  )
}

export default CategoryPilihan