<template>
  <div class="overlay center" @click="usePopup().close()">
    <div class="popup" :class="size" @click.stop>
      <div class="popup__header">
        <h2>{{ heading }}</h2>
        <UiButton icon="close" @click="usePopup().close()" class="square"></UiButton>
      </div>
      <div class="popup__body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {usePopup} from "~/components/popup/Popup";

defineProps({
  heading: String,
  size: String
})

document.addEventListener('keydown', (event) => {
    if(event.key === 'Escape')
    {
        usePopup().close();
    }
});
</script>

<style scoped>
.overlay {
  background-color: rgba(54, 54, 54, 0.514);
  backdrop-filter: blur(0.1rem);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  z-index: 2;
}

.popup {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background-color: rgb(255, 255, 255);
  border-radius: 0.5rem;
}

.popup__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.popup__body {
  height: 100%;
  overflow: hidden;
}
.MEDIUM {
  height: auto;
  width: 740px;
}
.SMALL {
  height: auto;
  width: 540px;
}
</style>