import Header from "@/components/shared/Header/Index";
import HeroBackground from "./HeroBackground";
import HeroContent from "./HeroContent";
import { CMSItem } from "@/types/cms";
import { filterCmsSection } from "@/services/cmsService";

export default function HeroSection({ cms }: { cms: CMSItem[] }) {
  const heroCms = filterCmsSection(cms, "hero_section");

  return (
    <section className="relative w-full max-h-screen overflow-hidden mb-10 lg:mb-20">
      <HeroBackground cms={heroCms} />
      <Header />
      <HeroContent cms={heroCms} />
    </section>
  );
}