<template>
  <div class="flex h-screen w-full bg-app-bg font-sans text-app-text overflow-hidden">
    <Sidebar 
      :currentView="currentView" 
      :setCurrentView="setCurrentView"
      :isPresentationMode="isPresentationMode"
    />

    <!-- Main Area -->
    <div class="flex-1 flex flex-col bg-slate-50 relative overflow-hidden">
      <ProjectListView 
        v-if="currentView === 'projects'"
        :setCurrentView="setCurrentView" 
        :setCurrentStep="setCurrentStep"
      />
      <EngagementView 
        v-if="currentView === 'engagement'"
        :currentStep="currentStep"
        :setCurrentStep="setCurrentStep"
        :setCurrentView="setCurrentView"
        :isPresentationMode="isPresentationMode"
        :setIsPresentationMode="setIsPresentationMode"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import Sidebar from './Sidebar.vue';
import ProjectListView from '@/pages/ProjectListView.vue';
import EngagementView from '@/pages/EngagementView.vue';
import type { ViewMode, Step } from '@/types';

interface Props {
  currentView: ViewMode;
  setCurrentView: (view: ViewMode) => void;
  currentStep: Step;
  setCurrentStep: (step: Step) => void;
  isPresentationMode: boolean;
  setIsPresentationMode: (mode: boolean) => void;
}

defineProps<Props>();
</script>
