<template>
  <!-- Фон затемнения, отображается только при открытом popup -->
  <div v-if="isOpen" class="fixed inset-0 bg-black bg-opacity-50 z-40" @click="closePopup"></div>

  <!-- Контейнер popup с анимацией -->
  <transition name="slide-up">
    <div v-if="isOpen" class="fixed bottom-0 left-0 right-0 h-[90vh] bg-white rounded-t-2xl shadow-lg z-50 flex flex-col">
      <header class="flex justify-between items-center p-4 border-b border-gray-200">
        <h2 class="text-lg font-semibold">{{ props.header }}</h2>
        <button class="text-blue-600 text-lg" @click="closePopup">Закрыть</button>
      </header>
      <div class="flex-grow overflow-y-auto p-4">
        <slot />
      </div>
    </div>
  </transition>
</template>

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

const props = defineProps({
  header: String
})

const isOpen = ref(true); // Управление открытием popup (можно связать с пропсом)
const emits = defineEmits(['close-popup']);
function closePopup() {
  emits('close-popup');
}
</script>

<style scoped>

</style>
