import React from "react";
// import SwiperComponent from "@/modules/collections/components/banner/swiper-component";
import Image from "next/image";

interface SwiperComponentProps {
  banner: string;
  name: string;
}

export default async function Page({ banner, name }: SwiperComponentProps) {
  return (
    <div className="relative">
      <Image
        alt="banner"
        loading="eager"
        quality={50}
        width={1920}
        height={280}
        className="w-[1920px] !h-[140px] lg:!h-[280px] object-cover"
        src={banner || ""}
      />
      <div className="absolute  inset-0 flex items-center justify-center bg-black/30">
        <div className="main-container mobile-container mx-auto w-full max-w-[1350px]">
          <h2 className="text-[20px] lg:text-[32px] leading-[25.2px] lg:leading-[42.84px] text-white font-semibold">
            {name}
          </h2>
          {/* <div
                className="rounded-[16px] text-[18px] text-white/80"
                dangerouslySetInnerHTML={{ __html: description }}
              /> */}
        </div>
      </div>
    </div>
  );
}