import Image from "next/legacy/image";

const HomeBanner = ({ homeBanner }: any) => {
  homeBanner = homeBanner.data;
  const defaultAltText = "Image Description";

  return (
    <>
      {homeBanner.image && (
        <section className="home-banner">
          <Image
            priority={true}
            className="momentus-image"
            src={homeBanner.image}
            layout="fill"
            sizes="50vw"
            alt={homeBanner.imageDescription || defaultAltText}
          />
          <div className="momentus-overlay"></div>
          <div className="momentus-content-wrapper">
            <h1 className="momentus-title">
              {homeBanner.titleFirstLine && homeBanner.titleFirstLine}
              {homeBanner.titleSecondLine && (
                <span className="second-line">
                  {homeBanner.titleSecondLine}
                </span>
              )}
            </h1>
          </div>
        </section>
      )}
    </>
  );
};

export default HomeBanner;