import Image from 'next/image'
import Link from 'next/link'
import React from 'react'

function CategoryArea({data}: any) {
  return (
    <section className="category-area" style={{ marginTop: "90px" }}>
    <div className="container">
      <div className="row justify-content-center">
        <div className="col-lg-7">
          <div className="text-center pb-15 pt-15"></div>

          <div className="category-title text-center pb-25">
            <h4 className="title" style={{ fontSize: "29px" }}>
              Technology, E-Commerce, Jobs, Developments, Events, and
              more
            </h4>
          </div>
        </div>
      </div>
      <div className="row">
        {data?.map((cl: any, i: number) => (
          <div key={i} className="col-lg-2 col-md-3 col-6">
            <div className="single-category text-center mt-30">
              <Link passHref href={"/ads/" + cl?.slug}>
                <a
                  className="view overlay zoom w-100"
                  style={{ cursor: "pointer", padding: "30px 5px" }}
                >
                  <span>
                    <Image
                      src={cl?.picture}
                      alt={cl?.name}
                      width={"60px"}
                      height={"60px"}
                    />
                  </span>
                  <h6 style={{ fontSize: "14px" }} className="title">
                    {cl?.name}
                  </h6>
                </a>
              </Link>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
  )
}

export default CategoryArea