<script setup lang="ts">
import { ref, watch } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  open?: boolean
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  open: false,
})

const emit = defineEmits<{
  'update:open': [value: boolean]
}>()

const visible = ref(props.open)

watch(
  () => props.open,
  (val) => {
    visible.value = val
  },
)

function close() {
  emit('update:open', false)
}

function onOverlayClick() {
  close()
}

defineExpose({ close })
</script>

<template>
  <Teleport to="body">
    <div
      v-if="visible"
      class="fixed inset-0 z-50 flex items-center justify-center"
      @click.self="onOverlayClick"
    >
      <!-- Overlay -->
      <div class="fixed inset-0 bg-black/60 backdrop-blur-sm" />

      <!-- Content -->
      <div
        :class="
          cn(
            'relative z-50 w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg',
            props.class,
          )
        "
      >
        <slot :close="close" />
      </div>
    </div>
  </Teleport>
</template>
