<script setup lang="ts">
import type { StyleValue } from 'vue';

import { computed, inject, useAttrs } from 'vue';

import { useScrollLock } from '@easyflow-core/composables';
import { cn } from '@easyflow-core/shared/utils';

defineOptions({
  inheritAttrs: false,
});

useScrollLock();

const attrs = useAttrs();
const id = inject('DISMISSABLE_MODAL_ID');
const overlayClass = computed(() => {
  const customClass = attrs.class as string | undefined;
  return cn(
    customClass ? 'z-popup inset-0' : 'bg-overlay z-popup inset-0',
    customClass,
  );
});
const overlayStyle = computed(() => attrs.style as StyleValue);
</script>
<template>
  <div
    :data-dismissable-modal="id"
    :class="overlayClass"
    :style="overlayStyle"
  ></div>
</template>
