<script setup>
import { computed, useSlots, watch } from "vue";
const props = defineProps({
  modelValue: Boolean,
  size: {
    type: String,
    default: "max-w-2xl",
  },
});
const emit = defineEmits(["update:modelValue", "onShow", "onHide"]);
const componentValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

watch(componentValue, (newValue) => {
  newValue ? emit("onShow", true) : emit("onHide", false);
});
const hasActions = computed(() => !!useSlots().actions);
</script>
<template>
  <div v-if="componentValue">
    <div
      class="bg-gray-900 !bg-opacity-50 fixed inset-0 z-[99999999999999998]"
    ></div>
    <div
      class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[99999999999999999] justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full flex"
    >
      <div :class="`${size} relative p-4 max-h-full`">
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
          <div class="flex items-center gap-x-2 justify-between p-4 md:p-5 rounded-t">
            <h3 class="text-2xl font-semibold text-gray-900 dark:text-white">
              <slot name="title" />
            </h3>
            <button
              type="button"
              class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
              @click="componentValue = false"
            >
              <x-mark-icon class="size-4" />
            </button>
          </div>
          <div class="px-4 py-2 md:px-5 space-y-4">
            <slot />
          </div>
          <div
            v-if="hasActions"
            class="flex items-center justify-end gap-3 p-4 md:p-5 rounded-b"
          >
            <slot name="actions" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
