import Link from "next/link";
import Image from "next/image";
import React from "react";
import { classifiedsCompType } from "types/PropInterfaces";

function ClassifiedsSection({ data }: classifiedsCompType) {
  return (
    <section className="category-area mt-10">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-7">
            <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 view overlay zoom w-100 mt-4 cursor-pointer hover:border-green-500 hover:text-green-500"
            >
              <Link href={"/ads/" + cl?.slug}>
                <div className="single-category text-center p-10 border hover:border-green-500 rounded-sm mt-0">
                  <>
                    <span>
                      <Image
                        src={cl?.picture}
                        alt={cl?.name}
                        width={"60px"}
                        height={"60px"}
                      />
                    </span>
                    <h6 style={{ fontSize: "14px" }} className="title">
                      {cl?.name}
                    </h6>
                  </>
                </div>
              </Link>
            </div>
          ))}
          {/* {Array.from(Array(12), (e, i) =>
                classifiedsCategories && classifiedsCategories[i]
                  ? (
                    <div key={i} className="col-lg-2 col-md-3 col-6 view overlay zoom w-100 mt-4 cursor-pointer hover:border-green-500 hover:text-green-500" >
                      <Link href={'/ads/' + classifiedsCategories[i]?.slug}>
                        <div className="single-category text-center p-10 border hover:border-green-500 rounded-sm mt-0">
                          <>
                            <span>
                              <Image src={classifiedsCategories[i]?.picture} alt={classifiedsCategories[i]?.name} width={'60px'} height={'60px'} />
                            </span>
                            <h6 style={{ fontSize: '14px' }} className="title">{classifiedsCategories[i]?.name}e</h6>
                          </>
                        </div>
                      </Link>
                    </div>
                  ) : null
              )} */}
        </div>
      </div>
    </section>
  );
}

export default ClassifiedsSection;