import Link from "next/link";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";

type Banner = { id: string; image: string; href: string };

export function BannerRow({ banners, columns }: { banners: Banner[]; columns: 2 | 3 }) {
  return (
    <section className="pt-8">
      <Container>
        <div className={`grid gap-3 ${columns === 3 ? "sm:grid-cols-3" : "sm:grid-cols-2"}`}>
          {banners.map((banner) => (
            <Link key={banner.id} href={banner.href} className="overflow-hidden rounded-xl bg-sky">
              <Placeholder src={banner.image} className="h-[100px] w-full object-cover sm:h-[118px]" />
            </Link>
          ))}
        </div>
      </Container>
    </section>
  );
}