import Link from 'next/link'
import React from 'react'
const items = [
    {
        label: "Agriculture and Raw material",
        value: "Agriculture and Raw material",
        image: "category/food-and-agriculture.jpeg",
        desc: "Farm implements and inputs"
      },
      { label: "Apparel and Accessories", value: "Apparel and Accessories", image:"category/clothings.jpeg", desc:'Clothes and clothing Materials' },
      { label: "Home and Garden", value: "Home and Garden", image:"category/home-and-garden.jpeg", desc:"Tools for Home and Garden Maintenance"},
      { label: "Beauty & Personal Care", value: "Beauty & Personal Care", image:"category/Beauty.jpeg", desc:'Skin care, cream and makeups' },
      { label: "Consumer Electronics", value: "Consumer Electronics", image:"category/consumer-electronics.jpeg", desc:'Phones, Tablets and accessories' },
      { label: "Sports and Entertainment", value: "Sports and Entertainment", image:"category/sports.jpeg", desc:'Sports Wears and gadgets' },
      { label: "Packaging and Printing", value: "Packaging and Printing", image:"category/print-package.jpeg", desc:"Tools for Packing and Publishing" },
 //     { label: "Industrial Machines", value: "Industrial Machines" },
      { label: "Shoes and Accesories", value: "Shoes and Accesories", image:"category/shoes.jpeg", desc:'Shoes and accessories' },
      {
        label: "Vehicle Parts and Accessories",
        value: "Vehicle Parts and Accessories",
        image: "category/motor-accessories.jpeg",
        desc:'Parts and Essential Motor Accesories'

      },
      { label: "Furniture", value: "Furniture", image: "category/furniture.jpeg", desc:'Classic furnitures for your purposes' },
  //    { label: "Home Appliances", value: "Home Appliances" },
      { label: "Tools and Hardware", value: "Tools and Hardware", image: "category/Tools.jpeg", desc:'Hand tools and levers' },
   //   { label: "Tech and Softwares", value: "Tech and Softwares", image: "category/Tools.jpeg", desc:'Hand tools and levers' },
    
   //   { label: "Luggages and Bags", value: "Luggages and Bags" },
      { label: "Construction & Paints", value: "Construction & Paints", image: "category/construction.jpeg", desc:'Construction machines and Building Materials ' },
      { label: "Lights & Lighting", value: "Lights & Lighting", image: "category/lights.jpeg", desc:'Lightings and accessories' },
      {
        label: "Health Care and Medical Supplies",
        value: "Health Care and Medical Supplies",
        image: "category/hospital equipments.jpeg",
        desc:'Medical Equipments, Supplements and Materials'
      },
 //     {   label: "School and Office Supplies", value: "School and Office Supplies", },
     // { label: "Renewable Energy", value: "Renewable Energy" },
    //  { label: "Food and Beverage", value: "Food and Beverage" },
   //   { label: "Chemicals", value: "Chemicals" },
]

export default function CategoryItem() {

    const handleCat =()=>{

    }

  return (<>
  {
    items.map((cat, index)=>{
        const {image, value, label, desc} = cat
        return(
            <div class="group relative" key={index}>
        
          
            <div class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64 my-6">
      <img src={image} alt={value} class="h-full w-full object-cover object-center"/>
    </div>
    <Link href= {`/products?category=${value}`} >
    <h3 class="mt-6 text-sm text-gray-500">
      
        <span class="absolute inset-0"></span>
        {label}
      
    </h3>
    <p class="text-base font-semibold text-gray-900">{desc}</p>
 </Link>
       
     </div>
        )
    })
  }
 
  </>
    
  )
}
