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

export interface Props {
  modelValue?: boolean;
}

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 pt-8">
        <div class="px-8 pb-4">
          <DialogTitle class="relative mb-8 flex flex-row">
            <slot name="title"></slot>
            <button
              type="button"
              class="absolute right-4 h-4 w-4 cursor-pointer"
              @click="setIsOpen(false)"
            >
              <it-icon-close></it-icon-close>
            </button>
          </DialogTitle>

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