import Image from "next/image";

export interface AnimImage {
  src: string;
  alt: string;
  className: string;
}

export interface PageBannerProps {
  animImages: AnimImage[];
  smallText?: string;
  subTitle: string;
  title: string;
  description?: string;
}

export default function PageBanner({
  animImages,
  smallText,
  subTitle,
  title,
  description,
}: PageBannerProps) {
  return (
    <>
      <div className="anim-img2">
        {animImages.map((img, index) => (
          <Image
            key={index}
            src={img.src}
            alt={img.alt}
            className={img.className}
            width={95}
            height={285}
          />
        ))}
      </div>
      <div className="page-banner">
        <div className="carousel-container">
          <div className="page-content">
            <span
              className="sub-title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={300}
            >
              {smallText && <small>{smallText}</small>} {subTitle}
            </span>
            <h1
              className="title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={400}
            >
              {title}
            </h1>
            {description && (
              <p data-aos="fade-up" data-aos-duration={700} data-aos-delay={400}>
                {description}
              </p>
            )}
          </div>
        </div>
      </div>
    </>
  );
}