/* eslint-disable @next/next/no-img-element */
import { memo, ReactNode } from "react";

interface MobileHeroProps {
  // Hero image - supports responsive images
  imageSrc: string;
  imageAlt: string;
  imageSrcMobile?: string; // Optional mobile-specific image
  imageSrcTablet?: string; // Optional tablet-specific image

  // Hero text (above image)
  title?: string;
  titleSlot?: ReactNode; // Custom title component (overrides title prop)
  subtitle?: ReactNode; // Can be string or JSX (e.g., with icon)

  // Content below image
  children?: ReactNode;

  // Customization
  titleClassName?: string;
  subtitleClassName?: string;
  contentWrapperClassName?: string;
}

const MobileHero = ({
  // Image props - use placeholder by default
  imageSrc = "/images/placeholder-hero.jpg",
  imageAlt = "Hero background image",
  imageSrcMobile,
  imageSrcTablet,

  // Text props
  title,
  titleSlot,
  subtitle,

  // Slots
  children,

  // Customization
  titleClassName = "",
  subtitleClassName = "",
  contentWrapperClassName = "",
}: MobileHeroProps) => {
  // Determine if we should use picture element for responsive images
  const hasResponsiveImages = imageSrcMobile || imageSrcTablet;

  return (
    <section className="relative w-full bg-white">
      {/* Title and subtitle - above image */}
      <div className="w-full px-4 pt-20 pb-4 md:pt-20 md:pb-6">
        <div className="space-y-1 md:space-y-2">
          {titleSlot ? (
            titleSlot
          ) : (
            <h1
              className={`font-light text-[30px] min-[420px]:text-[44px] md:text-5xl text-[#28241E] font-creato pb-0 md:pb-2 ${titleClassName}`}
            >
              {title}
            </h1>
          )}
          {subtitle && (
            <p
              className={`text-[12px] min-[420px]:text-[15px] md:text-base text-[#666666] leading-relaxed tracking-wide ${subtitleClassName}`}
            >
              {subtitle}
            </p>
          )}
        </div>
      </div>

      {/* Image Section - aspect-ratio reserves space to prevent layout shift */}
      <div className="w-full px-4">
        <div className="w-full aspect-[4/5.3] overflow-hidden rounded-sm bg-[#eaeaea]">
          {hasResponsiveImages ? (
            <picture className="block w-full h-full">
              {imageSrcMobile && (
                <source media="(max-width: 480px)" srcSet={imageSrcMobile} />
              )}
              {imageSrcTablet && (
                <source
                  media="(min-width: 481px) and (max-width: 1180px)"
                  srcSet={imageSrcTablet}
                />
              )}
              <img
                src={imageSrcMobile || imageSrcTablet || imageSrc}
                alt={imageAlt}
                className="w-full h-full object-cover"
                loading="eager"
                fetchPriority="high"
                decoding="async"
              />
            </picture>
          ) : (
            <img
              src={imageSrc}
              alt={imageAlt}
              className="w-full h-full object-cover"
            />
          )}
        </div>
      </div>

      {/* Content section - below image */}
      <div
        className={`w-full px-4 py-8 md:py-10 bg-white ${contentWrapperClassName}`}
      >
        {children}
      </div>
    </section>
  );
};

export default memo(MobileHero);