<script setup lang="ts">
import { Dialog, DialogDescription, DialogPanel, DialogTitle } from "@headlessui/vue";
import { ref } from "vue";

interface Props {
  modelValue: boolean;
}

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

const emits = defineEmits(["update:modelValue"]);

function setIsOpen(value: boolean) {
  emits("update:modelValue", value);
}
</script>

<template>
  <Dialog :open="modelValue" class="relative z-50" @close="setIsOpen">
    <div class="fixed inset-0 bg-black/30" aria-hidden="true"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
      <DialogPanel class="w-full max-w-2xl bg-white px-8 pt-8 pb-4">
        <DialogTitle class="flex flex-row relative mb-8">
          <slot name="title"></slot>
          <button
            type="button"
            class="w-4 h-4 absolute right-4 cursor-pointer"
            @click="setIsOpen(false)"
          >
            <it-icon-close></it-icon-close>
          </button>
        </DialogTitle>
        <DialogDescription></DialogDescription>

        <slot name="body"></slot>
      </DialogPanel>
    </div>
  </Dialog>
</template>
