<template>
  <div id="app" class="h-full bg-background">
    <router-view v-slot="{ Component, route }">
      <transition 
        :name="getTransitionName(route)" 
        mode="out-in"
        appear
      >
        <component :is="Component" :key="route.path" />
      </transition>
    </router-view>
  </div>
  <!-- Toaster component - should be at the end for proper positioning -->
    <Toaster 
    />
</template>

<script setup>
import { Toaster } from '@/components/ui/sonner';
import 'vue-sonner/style.css';

// Function to determine transition name based on route
const getTransitionName = (route) => {
  // Define route hierarchy for directional transitions
  const routeHierarchy = {
    '/login': 1,
    '/signup': 1,
    '/verify-otp': 2,
    '/dashboard': 3
  }
  
  // You can customize this logic for different transition effects
  // For now, we'll use a simple fade transition for all routes
  return 'fade'
}
</script>

<style>
/* Fade transition */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.fade-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* Slide transition (alternative) */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slide-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.slide-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

/* Scale transition (alternative) */
.scale-enter-active,
.scale-leave-active {
  transition: all 0.3s ease;
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}
</style>