import Image from "next/image";
import Link from "next/link";
import { PageContainer } from "@/components/layout/page-container";
import { detonexHomeFeatureGrid } from "@/lib/detonex-figma";
import type { StorefrontFeatureGridBanner } from "@/types/storefront";

export function HomeFeatureGridSection({
  banners,
}: {
  banners?: StorefrontFeatureGridBanner[];
}) {
  const resolvedBanners = Array.from({ length: 3 }, (_, index) => {
    const fallback = detonexHomeFeatureGrid[index];
    const banner = banners?.[index];

    return {
      id: banner?.id || `fallback-banner-${index + 1}`,
      title: banner?.title || fallback?.alt || `Baner ${index + 1}`,
      href: banner?.href || fallback?.href || undefined,
      imageSrc: banner?.image?.src || fallback?.src,
      imageAlt: banner?.image?.alt || banner?.title || fallback?.alt || `Baner ${index + 1}`,
      width: fallback?.width || 295,
      height: fallback?.height || 460,
    };
  });

  return (
    <section className="bg-muted-surface pt-20 pb-0">
      <PageContainer>
        <div className="grid gap-5 xl:grid-cols-[295px_minmax(0,610px)_295px]">
          {resolvedBanners.map((item) => {
            const content = (
              <div className="relative h-full w-full">
                <Image
                  src={item.imageSrc}
                  alt={item.imageAlt}
                  fill
                  sizes="(max-width: 1279px) 100vw, 33vw"
                  className="object-cover"
                />
              </div>
            );

            return item.href ? (
              <Link
                key={item.id}
                href={item.href}
                className="block h-[220px] overflow-hidden rounded-[12px] md:h-[320px] xl:h-[460px]"
              >
                {content}
              </Link>
            ) : (
              <div
                key={item.id}
                className="h-[220px] overflow-hidden rounded-[12px] md:h-[320px] xl:h-[460px]"
              >
                {content}
              </div>
            );
          })}
        </div>
      </PageContainer>
    </section>
  );
}