import Image from "next/image";
import defaultimg from "@/public/defaultimg.png";
interface BannerProps {
  img: string;
  img2?: string;
  title?: string;
  description?: string;
  withoutShadow?: boolean;
  className?: string;
  classNameWrapper?: string;
}

const Banner = ({
  img,
  img2,
  title,
  
  withoutShadow,
  className,
  classNameWrapper,
}: BannerProps) => {
  return (
    <div
      className={`flex justify-center  w-full ${
        classNameWrapper && classNameWrapper
      }`}
    >
      {/* h-[300px] sm:h-[350px] md:h-[450px] lg:h-[500px] xl: */}
      <div
        className={`relative w-full h-[291px] overflow-hidden  ${
          className && className
        }`}
      >
        {" "}
        <div
          className={`absolute top-0 right-0 left-0 bottom-0 ${
            withoutShadow ? "" : "bg-black opacity-50"
          } `}
        />
        <Image
          src={img || defaultimg}
          alt=""
          width={1200}
          height={1000}
          className="w-full h-full object-cover rounded-lg"
        />
        <div
          className="absolute inset-0 flex flex-col items-center justify-center  rounded-lg gap-4  "
          data-aos="fade-down"
          data-aos-duration="1000"
        >
          <Image
            width={1200}
            height={1000}
            src={img2 || defaultimg}
            alt="img2"
            className="w-[145px] h-[145px] rounded-full"
          />
          <h2 className="text-white text-[28px] font-medium">{title}</h2>
          
        </div>
      </div>
    </div>
  );
};
export default Banner;