"use client";

import HeroSection from "./Hero";
import HeroDesktop from "./HeroDesktop";
import type { ListingPropertyPageData } from "@/utils/strapi";

interface HeroWrapperProps {
  type?: string;
  /** When set, hero copy and images come from Strapi listing property page. */
  listingPage?: ListingPropertyPageData | null;
}

const HeroWrapper = ({ type = "all", listingPage }: HeroWrapperProps) => {
  const heroFromCms =
    listingPage &&
    (listingPage.heroTitle ||
      listingPage.heroDescription ||
      listingPage.heroImageMobileUrl ||
      listingPage.heroDesktopSmallImageUrl ||
      listingPage.heroDesktopBigImageUrl)
      ? {
          heroTitle: listingPage.heroTitle,
          heroDescription: listingPage.heroDescription,
          heroImageMobileUrl: listingPage.heroImageMobileUrl ?? undefined,
          heroImageRightUrl:
            listingPage.heroImageMobileUrl ??
            listingPage.heroDesktopBigImageUrl ??
            undefined,
          heroDesktopSmallUrl:
            listingPage.heroDesktopSmallImageUrl ?? undefined,
          heroDesktopBigUrl: listingPage.heroDesktopBigImageUrl ?? undefined,
        }
      : undefined;

  return (
    <div className="relative">
      {/* Mobile hero */}
      <div className="block xl:hidden">
        <HeroSection type={type} listingHero={heroFromCms} />
      </div>
      {/* Desktop hero */}
      <div className="hidden xl:block">
        <HeroDesktop type={type} listingHero={heroFromCms} />
      </div>
    </div>
  );
};

export default HeroWrapper;