<template>
  <div>
    <AppMenu />
    <!-- <div class="flex justify-between items-center h-16">
      <Button @click="$router.back()" link icon="pi pi-arrow-left" v-if="$route.meta?.rentStep < 8"></Button>
      <div class="px-3">{{ $route?.meta?.title }}</div>
    </div> -->
    <div class="">
      <RentStep v-if="$route.meta?.rentStep < 8" />
      <!--     <Stepper value="1" linear>
      <StepList>
        <Step value="1">Autófelvétel</Step>
        <Step value="2"></Step>
        <Step value="3"></Step>
      </StepList>
    </Stepper> -->
      <NuxtPage />
      <!-- <pre>{{ rent }}</pre> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
const { rent } = useAuthStore()

const prevPage = ref()
definePageMeta({
  pageTransition: {
    name: 'slide-right',
    mode: 'out-in'
  },
  middleware(to, from) {
    if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean')
      console.log(to.meta)
    to.meta.pageTransition.name = +to.meta.rentStep! > +from.meta.rentStep! ? 'slide-left' : 'slide-right'
    prevPage.value = from.fullPath
  }
})


</script>

<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.2s;
}

.slide-left-enter-from {
  opacity: 0;
  transform: translate(50px, 0);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translate(-50px, 0);
}

.slide-right-enter-from {
  opacity: 0;
  transform: translate(-50px, 0);
}

.slide-right-leave-to {
  opacity: 0;
  transform: translate(50px, 0);
}
</style>