import commonService from "@/lib/services/common";
import { IndustryResponse } from "@/lib/types/models";
import Image from "next/image";
import Link from "next/link";
import ViewAll from "@/modules/ui/view-all";

export default async function Page() {
  const response: IndustryResponse = await commonService.getIndustry();
  const data = response?.success ? response?.data || [] : [];
  return (
    <div className="main-container py-5">
      <h2 className="mobile-container text-[20px] lg:text-[32px] leading-[25.2px] lg:leading-[42.84px] text-neutral-black-87 mb-[20px] font-semibold">
        Shop by Industry
      </h2>
      <div className="mobile-container grid grid-cols-3 lg:grid-cols-4 gap-4">
        {data?.slice(0, 8)?.map((item, index) => {
          const slug = item?.slug || "";
          const name = item?.industriesName || item?.name || "Industry";
          const imageSrc = item?.image || "/images/placeholder-image.png";
          return (
            <div key={item._id || index} className={index >= 6 ? "hidden lg:block" : "block"}>
              <Link className="cursor-pointer block" href={`/shop-by-industries/${slug}`}>
                <div className="relative rounded-[8px]">
                  <picture>
                    <Image
                      className="rounded-[8px] !w-[103px] lg:!w-[266px] !h-[54px] lg:!h-[140px] object-fill"
                      loading="lazy"
                      src={imageSrc}
                      width={266}
                      height={140}
                      alt={name}
                    />
                  </picture>
                </div>
                <h3 className="mt-[8px] text-black font-medium text-[13px] lg:text-[20px]">
                  {name}
                </h3>
              </Link>
            </div>
          );
        })}
      </div>
      <ViewAll title="View all shop by industry" link="/shop-by-industries" />
    </div>
  );
}