import { Container } from "@/components/Container";
import { SlotMedia } from "@/components/SlotMedia";
import type { SlotMediaItem } from "@/lib/static-images";

export function BannerRow({
  banners,
  columns,
  aspectRatio,
}: {
  banners?: SlotMediaItem[];
  columns: 2 | 3;
  aspectRatio?: string;
}) {
  return (
    <section className="pt-8">
      <Container>
        <div className={`grid gap-3 ${columns === 3 ? "sm:grid-cols-3" : "sm:grid-cols-2"}`}>
          {(banners ?? []).map((banner) => (
            <SlotMedia
              key={banner.id}
              src={banner.image}
              href={banner.href}
              fallbackSrc={banner.fallbackSrc}
              aspectRatio={aspectRatio}
              className={`rounded-xl bg-sky ${!aspectRatio ? "h-[100px] sm:h-[118px]" : ""}`}
            />
          ))}
        </div>
      </Container>
    </section>
  );
}