import type { ReactNode } from 'react';

interface PageBannerProps {
  image: string;
  alt: string;
  title: ReactNode;
  subtitle: ReactNode;
  variant?: 'page-banner' | 'event-banner' | 'legal-banner';
  columnClassName?: string;
  /** The Insights banners use a different (misspelled) alignment class in the original markup. */
  stackClassName?: string;
  titleClassName?: string;
}

export default function PageBanner({
  image,
  alt,
  title,
  subtitle,
  variant = 'page-banner',
  columnClassName = 'col-12 col-lg-7',
  stackClassName = 'd-flex flex-column align-items-start gap-4',
  titleClassName = 'mainHeading color-white mb-0',
}: PageBannerProps) {
  return (
    <section className={`spotlight-hero ${variant} webContent`}>
      <img className="banner-img" src={image} alt={alt} />
      <div className="container">
        <div className="row">
          <div className={columnClassName}>
            <div className={stackClassName}>
              <div className="d-flex flex-column align-items-start gap-3">
                <h1 className={titleClassName}>{title}</h1>
                <span className="heading-line"></span>
              </div>
              <p className="text-lg color-white mb-0">{subtitle}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}