<script setup lang="ts">
import { provide, useId } from 'vue'
import { useVModel } from '@vueuse/core'
import { DialogContextKey } from './context'

const props = defineProps<{ open?: boolean, defaultOpen?: boolean }>()
const emit = defineEmits<{ 'update:open': [value: boolean] }>()

const open = useVModel(props, 'open', emit, {
  passive: true,
  defaultValue: props.defaultOpen ?? false,
})

provide(DialogContextKey, {
  open,
  titleId: `dialog-title-${useId()}`,
  descriptionId: `dialog-description-${useId()}`,
})
</script>

<template>
  <slot />
</template>
