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

export function HomePrimaryBannerSection({
  banner,
}: {
  banner?: StorefrontFeaturedBanner | null;
}) {
  const imageSrc = banner?.image?.src || detonexFigmaAssets.featuredBanner;
  const imageAlt = banner?.image?.alt || banner?.title || "Istaknuti Detonex banner";
  const content = (
    <Image
      src={imageSrc}
      alt={imageAlt}
      width={1240}
      height={500}
      sizes="(max-width: 1439px) 100vw, 1240px"
      className="h-auto w-full"
    />
  );

  return (
    <section className="bg-muted-surface pb-0 pt-20">
      <PageContainer>
        {banner?.href ? (
          <Link href={banner.href} className="block overflow-hidden rounded-[12px]">
            {content}
          </Link>
        ) : (
          <div className="overflow-hidden rounded-[12px]">{content}</div>
        )}
      </PageContainer>
    </section>
  );
}