"use client";

import OurStoryAnimatedHero from "./animatedHero";
import StoryMobileAnimatedHero from "./mobileAnimatedHero";
import type { StoryPageData } from "@/utils/strapi";

interface StoryHeroWrapperProps {
  storyData: StoryPageData | null;
}

const StoryHeroWrapper = ({ storyData }: StoryHeroWrapperProps) => {
  return (
    <>
      {/* Mobile & Tablet Hero - visible up to lg (hidden at xl and above) */}
      <div className="block xl:hidden">
        <StoryMobileAnimatedHero storyData={storyData} />
      </div>

      {/* Desktop Hero - visible at xl and above */}
      <div className="hidden xl:block">
        <OurStoryAnimatedHero storyData={storyData} />
      </div>
    </>
  );
};

export default StoryHeroWrapper;