<script setup lang="ts">
interface props {
  isShowDimmed?: boolean
  isOutsideClose?: boolean
  modalName?: string
  areaClass?: string
  closeClass?: string
}

const props = withDefaults(defineProps<props>(), {
  isShowDimmed: true,
  isOutsideClose: false,
})

const emit = defineEmits<{
  close: []
}>()

const isOpen = defineModel<boolean>('isOpen', { default: false })

const handleCloseModal = () => {
  emit('close')
  isOpen.value = false
}

const handleOutsideClick = () => {
  if (props.isOutsideClose) {
    handleCloseModal()
  }
}
</script>

<template>
  <Transition name="fade">
    <div
      v-if="isOpen"
      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.modalName]"
      @click="handleOutsideClick"
    >
      <div :class="['modal-area', props.areaClass]" @click.stop>
        <div class="modal-content">
          <slot></slot>
        </div>
        <button
          type="button"
          :class="['modal-close', props.closeClass]"
          @click="handleCloseModal"
        >
          <span class="sr-only">close</span>
          <AtomsIconsCloseLine size="24" color="#333333" />
        </button>
      </div>
    </div>
  </Transition>
</template>
