import type { VenueLandingSection } from "@/constants/pages";

import WhyChooseWave from "./WhyChooseWave";
import DetailsSection from "./DetailsSection";
import RecommendationSection from "./RecommendationSection";
import VenueShowcaseSection from "./VenueShowcaseSection";
import OccasionSection from "./OccasionSection";
import CollectionSection from "./CollectionSection";
import ExploreSection from "./ExploreSection";
import PointsSection from "./PointsSection";

type Props = {
  section: VenueLandingSection;
};

export default function VenueLandingSections({ section }: Props) {
  const sections = [
    

    section.details && (
      <DetailsSection
        key="details"
        section={section.details}
      />
    ),

    ...(section.showcase?.map((showcase, index) => (
      <VenueShowcaseSection
        key={`showcase-${index}`}
        section={showcase}
      />
    )) ?? []),

    section.recommendation && (
      <RecommendationSection
        key="recommendation"
        section={section.recommendation}
      />
    ),

    section.occasions && (
      <OccasionSection
        key="occasions"
        section={section.occasions}
      />
    ),

    section.pointsSection && (
  <PointsSection
    key="pointsSection"
    section={section.pointsSection}
  />
),

    section.collectionSection && (
      <CollectionSection
        key="collectionSection"
        section={section.collectionSection}
      />
    ),

    section.exploreSection && (
      <ExploreSection
        key="exploreSection"
        section={section.exploreSection}
      />
    ),
    section.whyChoose && (
      <WhyChooseWave
        key="whyChoose"
        section={section.whyChoose}
      />
    ),

  ].filter(Boolean);

  return (
    <>
      {sections.map((component, index) => (
        <div
          key={index}
          className={index % 2 === 0 ? "bg-cream" : "bg-ivory"}
        >
          {component}
        </div>
      ))}
    </>
  );
}