<script setup lang="ts">
import { Sheet, SheetContent } from '@/components/ui/sheet'

interface Props {
  visible: boolean
  mobileOpen: boolean
}

defineProps<Props>()
const emit = defineEmits<{ 'update:mobileOpen': [value: boolean] }>()
</script>

<template>
  <Transition
    enter-active-class="transition-transform duration-300 ease-out"
    enter-from-class="translate-x-full"
    enter-to-class="translate-x-0"
    leave-active-class="transition-transform duration-300 ease-in"
    leave-from-class="translate-x-0"
    leave-to-class="translate-x-full"
  >
    <div
      v-if="visible"
      class="fixed right-0 top-[113px] bottom-0 w-96 bg-background border-l shadow-lg z-50 hidden lg:block overflow-y-auto"
    >
      <slot />
    </div>
  </Transition>

  <Sheet :open="mobileOpen" @update:open="emit('update:mobileOpen', $event)">
    <SheetContent side="right" class="w-full sm:max-w-md p-0">
      <slot />
    </SheetContent>
  </Sheet>
</template>
