<template>
  <main class="flex flex-col items-stretch | w-full">
    <Header />
    <component :is="stepsComponents[currentStep]" @update:step="changeStep" />
  </main>
</template>
<script setup>
import { ref } from "vue";
import Header from "../components/project/Header.vue";
import Intro from "../components/project/ClientBrief/Intro.vue";
import ModeSelection from "../components/project/ClientBrief/ModeSelection.vue";
import AddImages from "../components/project/ClientBrief/AddImages.vue";

const stepsComponents = {
  Intro,
  ModeSelection,
  AddImages,
};

const currentStep = ref("Intro");

function changeStep(stepName) {
  currentStep.value = stepName;
}
</script>
