import Image from "next/image";

const promoBanners = [
  {
    title: "Limited Time Deals",
    image: "/banner-4.png",
  },
  {
    title: "Fresh Picks",
    image: "/banner-5.png",
  },
];

export default function Offers({
  banners = [],
}: {
  banners?: { title: string; image: string; link: string | null }[];
}) {
  const displayBanners = banners.length ? banners.slice(0, 2) : promoBanners;
  return (
    <section className="mt-8 md:mt-10">
      <div className="grid gap-4 md:grid-cols-2">
        {displayBanners.map((banner) => (
          <div
            key={banner.title}
            className="group relative overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 shadow-sm"
          >
            <Image
              src={banner.image}
              alt={banner.title}
              width={1200}
              height={700}
              className="w-full object-cover"
            />
          </div>
        ))}
      </div>
    </section>
  );
}