import { PageHeader } from "antd";
import {
  classifiedCategories,
  fetchDistricts,
  fetchHomepageAds,
} from "apiCalls/apiEndpoints";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import { FeaturedAdsType } from "types/PropInterfaces";
import SingleAd from "./SingleAd";

function FeaturedAds({ data }: FeaturedAdsType) {
  return (
    <section className="container mx-auto sm:px-10 lg:px-10 xl:px-6 mt-16">
      <PageHeader
        className="site-page-header"
        title={
          <h3 style={{ fontSize: "25px", color: "#000", margin: 0 }}>
            Featured Ads(s)
          </h3>
        }
        style={{
          borderTop: "3px solid green",
          borderBottom: "1px solid green",
          paddingTop: "7px",
          paddingBottom: "7px",
        }}
      />
      <section className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-5 my-4">
        {data.map((ads: any, i: number) => {
          if (!ads?.model?.picture) {
            return <></>;
          }

          return (
            <SingleAd
              key={i}
              slug={ads?.model?.slug}
              price={ads?.model?.price}
              name={ads?.model?.name?.slice(0, 30)}
              picture={ads?.model?.picture}
              intprice={ads?.model?.priceAsInt}
            />
          );
        })}
      </section>

      <div className="ads-more mt-8">
        <Link href="/ads">
          <a className="text-green-500 hover:text-green-900 border-2 border-green-500 rounded-md p-2">
            <div className="flex items-center">
              View All Ads{" "}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6 ml-2"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M14 5l7 7m0 0l-7 7m7-7H3"
                />
              </svg>
            </div>
          </a>
        </Link>
      </div>
    </section>
  );
}

export default FeaturedAds;