import heroImage from "@/assets/images/hero-section.jpg";
import { CMSItem } from "@/types/cms";
import { cmsImageUrl } from "@/services/cmsService";
import CmsPreviewImage from "@/components/preview/CmsPreviewImage";

export default async function HeroBackground({ cms }: { cms: CMSItem[] }) {
  const backgroundImage = cmsImageUrl(cms, "cover_image") || heroImage;

  return (
    <>
      <div className="absolute inset-0 z-0">
        <CmsPreviewImage
          sectionName="hero_section"
          inputNameEn="cover_image"
          initialSrc={backgroundImage}
          alt="Hero Section Background"
          fill
          priority
          className="object-cover"
          quality={90}
        />
      </div>
      <div className="absolute inset-0 z-1 hero-overlay" />
    </>
  );
}