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

const props = defineProps({
  // show: {
  //   type: Boolean,
  //   default: false,
  // },
  title: {
    type: String,
    default: '',
  },
})

// const { show } = toRefs(props)
// watch(
//   () => props.show,
//   n => {
//     modelVisible.value = n
//   }
// )
// const modelVisible = ref(props.show)

// const emit = defineEmits(['update:show'])
// const closeModal = () => {
//   show.value = false
//   emit('update:show', false)
//   console.log(show)
// }
const show = defineModel<boolean>('show')
</script>

<template>
  <n-modal
    v-model:show="show"
    preset="dialog"
    :title="props.title"
    class="bg-[#1c202cee] text-white"
    style="width: auto"
  >
    <slot></slot>
  </n-modal>
</template>

<style scoped lang="scss">
:deep(.n-dialog) {
  .n-dialog__title {
    color: white;
  }
}
</style>
