<template>
  <q-dialog
    v-model="isOpen"
    class="popup kettalComponent"
    test-id="commonPopup"
    :persistent="persistent"
    square
    @before-hide="$emit('closePopup')"
  >
    <div class="popup__container">
      <div class="popup__header row justify-between no-wrap items-center">
        <div
          class="popup__title"
          test-id="popupTitle"
        >
          {{ popupTitle }}
        </div>
        <div
          class="popup__btnClose"
          test-id="popup__btnClose"
          @click="
            () => {
              isOpen = false;
              $emit('closePopup');
            }
          "
        >
          <q-icon class="close__icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="34.523"
              height="34.524"
              viewBox="0 0 34.523 34.524"
            >
              <path
                id="Caminho_701"
                data-name="Caminho 701"
                d="M125.892,96.156l-2.33-2.332L108.63,109.92,93.7,93.825l-2.33,2.332,16.094,14.93-16.094,14.93,2.33,2.332,14.931-16.095,14.931,16.095,2.33-2.332L109.8,111.087Z"
                transform="translate(-91.369 -93.825)"
                fill="#212427"
              />
            </svg>
          </q-icon>
        </div>
      </div>

      <div
        class="popup__content"
        test-id="popupContent"
      >
        <slot />
      </div>
    </div>
  </q-dialog>
</template>

<script lang="ts" setup>
import { CommonPopupEmits, CommonPopupProps } from './types'

withDefaults(defineProps<CommonPopupProps>(), {
  persistent: false
})
const isOpen = defineModel('isOpen', { required: true, default: false, type: Boolean })

defineEmits<CommonPopupEmits>()
</script>

<style scoped>
</style>
