<template>
  <div v-if="modelValue" class="fixed inset-0 z-50">
    <Transition name="drawer-backdrop">
      <div class="absolute inset-0 bg-black/40" @click="close" />
    </Transition>
    <Transition name="drawer-panel">
      <div class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl">
        <div class="flex items-center justify-between border-b border-neutral-200 bg-tertiary-500 px-6 py-4">
          <h2 class="text-lg font-semibold text-neutral-900">
            {{ title }}
          </h2>
          <button
            type="button"
            class="rounded-md p-2 text-neutral-500 hover:bg-neutral-100"
            @click="close"
          >
            ✕
          </button>
        </div>
        <div class="p-6">
          <slot />
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{ modelValue: boolean; title?: string }>()
const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()

const close = () => emit('update:modelValue', false)
</script>

<style scoped>
.drawer-backdrop-enter-active,
.drawer-backdrop-leave-active {
  transition: opacity 0.2s ease;
}

.drawer-backdrop-enter-from,
.drawer-backdrop-leave-to {
  opacity: 0;
}

.drawer-panel-enter-active,
.drawer-panel-leave-active {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.drawer-panel-enter-from,
.drawer-panel-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>
