<script setup lang="ts">
import type { PropType } from 'vue'

type ModeOptions = 'in-out' | 'out-in' | 'default' | undefined

const props = defineProps({
  fallback: {
    type: String,
    default: '',
  },
  appear: {
    type: Boolean,
    default: false,
  },
  mode: {
    type: String as PropType<ModeOptions>,
    default: 'out-in',
  },
  enter: {
    type: String,
    default: 'animate__fadeIn',
  },
  leave: {
    type: String,
    default: 'animate__fadeOut',
  },
})
</script>

<template>
  <ClientOnly>
    <template #fallback>{{ props.fallback }}</template>

    <Transition
      :appear="props.appear"
      :mode="props.mode"
      :enter-active-class="`animate__animated ${props.enter}`"
      :leave-active-class="`animate__animated ${props.leave}`"
    >
      <slot />
    </Transition>
  </ClientOnly>
</template>
