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

interface SwiperComponentProps {
  name: string | "";
  description: string | "";
  image: string | null;
}

export default async function Page({
  name,
  description,
  image,
}: 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={image || ""}
      />
      <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>
  );
}