import { Suspense } from "react"

import Breadcrumbs from "@/components/Breadcrumbs"
import Hero from "@/components/Hero"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"

import styles from "./heroHeader.module.css"

import type { ApiImage } from "@/types/hotel"

interface HeroHeaderProps {
  breadcrumbsTitle: string
  heroImage?: ApiImage
}

export default async function HeroHeader({
  breadcrumbsTitle,
  heroImage,
}: HeroHeaderProps) {
  return (
    <div className={styles.header}>
      <Suspense fallback={<BreadcrumbsSkeleton size="contentWidth" />}>
        <Breadcrumbs subpageTitle={breadcrumbsTitle} size="contentWidth" />
      </Suspense>

      {heroImage ? (
        <div className={styles.heroWrapper}>
          <Hero
            src={heroImage.imageSizes.medium}
            alt={heroImage.metaData.altText || ""}
          />
        </div>
      ) : null}
    </div>
  )
}
