---
import FrequentlyAskedQuestions from '../web/FrequentlyAskedQuestions.astro';
import Hero from '../web/Hero.astro';
import TextWithImage from '../web/TextWithImage.astro';
import UpcomingEvents from '../web/UpcomingEvents.astro';
import WallOfText from '../web/WallOfText.astro';
import EquipmentTable from '../web/EquipmentTable.astro';
import Reviews from '../web/Reviews.astro';
import LastBlogs from '../web/LastBlogs.astro';
import LastProjects from '../web/LastProjects.astro';

interface Props {
    webpage: WebpageComponent[];
}

const components = Astro.props.webpage;

console.log(Astro.props.webpage);
---

<div class="flex flex-col">
    { components.map((component) => (
        <Fragment>
            { component.component === "Hero" && <Hero hero={component} /> }
            { component.component === "TextWithImage" && <TextWithImage textWithImage={component} /> }
            { component.component === "WallOfText" && <WallOfText wallOfText={component} /> }
            { component.component === "UpcomingEvents" && <UpcomingEvents upcomingEvents={component} /> }
            { component.component === "FrequentlyAskedQuestions" && <FrequentlyAskedQuestions faq={component} /> }
            { component.component === "EquipmentTable" && <EquipmentTable equipment={component} /> }
            { component.component === "Reviews" && <Reviews reviews={component} /> }
            { component.component === "LastBlogs" && <LastBlogs blogs={component} /> }
            { component.component === "LastProjects" && <LastProjects projects={component} /> }
        </Fragment>
    )) }
</div>