import { HeroSlider } from "@/components/HeroSlider";
import { SlotBanner } from "@/components/SlotBanner";
import { site } from "@/data/site";
import { padSlotImages, slotImages, type StaticImageSlot } from "@/lib/static-images";

type Props = {
  slider?: StaticImageSlot;
  beside?: StaticImageSlot;
};

const sliderFallback = {
  src: "/images/banners/hero.jpg",
  alt: site.slogan,
  href: "/products",
  width: 1538,
  height: 870,
};

const besideFallbacks = [
  {
    src: "/images/banners/side-chicks.jpg",
    alt: "انواع تخم نطفه‌دار",
    href: "/products?categoryId=548",
    width: 370,
    height: 205,
  },
  {
    src: "/images/banners/side-eggs.jpg",
    alt: "انواع تخم مرغ",
    href: "/products?categoryId=548",
    width: 370,
    height: 205,
  },
];

export function Hero({ slider, beside }: Props) {
  const besideImages = padSlotImages(beside, 2).slice(0, 2);

  return (
    <section className="mx-auto grid max-w-7xl gap-4 px-4 py-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
      <h1 className="sr-only">{site.name}</h1>
      <div className="min-h-[280px] min-w-0 sm:min-h-[360px]">
        <HeroSlider
          images={slotImages(slider)}
          fallback={sliderFallback}
          className="h-full w-full"
        />
      </div>

      <div className="grid min-w-0 gap-4">
        {besideImages.map((image, index) => (
          <SlotBanner
            key={image?.id ?? besideFallbacks[index].src}
            image={image}
            fallback={besideFallbacks[index]}
            aspectRatio={beside?.aspectRatio ?? "74:41"}
            className="h-full min-h-0"
          />
        ))}
      </div>
    </section>
  );
}