<script setup lang="ts">
import { Resume, ResumeComponentPlacement } from '@/types/resume';
import ResumeComponentEdit from './ResumeComponentEdit.vue';
import ResumeComponentsList from './ResumeComponentsList.vue';

const props = defineProps<{
    resume: Resume
    selectedComponent: ResumeComponentPlacement | null
}>();

const emit = defineEmits(['selected-component-change']);
</script>

<template>
    <div class="flex h-full flex-1 gap-4 rounded-xl p-4 overflow-x-auto max-w-[25%] bg-accent relative">
        <Transition mode="out-in" appear>
            <ResumeComponentEdit v-if="selectedComponent != null" :resume="props.resume" :selectedComponent="props.selectedComponent" @selected-component-change="emit('selected-component-change', $event)" :key="selectedComponent ? selectedComponent.id : 'form'" />
            <ResumeComponentsList v-else :resume="props.resume" :selectedComponent="props.selectedComponent" @selected-component-change="emit('selected-component-change', $event)" />
        </Transition>
    </div>
</template>

<style lang="css" scoped>
    .v-enter-active,
    .v-leave-active {
    transition: opacity 0.3s ease;
    }

    .v-enter-from,
    .v-leave-to {
    opacity: 0;
    }
</style>
