<template>
    <transition name="fade">
        <div v-if="isVisible" class="fixed inset-0 flex items-center justify-center z-50">
        <div class="fixed inset-0 bg-black opacity-70" @click="closePopup"></div>
        <div :class="popupSizeClasses" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-xl p-6 relative overflow-auto">
            <button v-if="showCloseButton" class="absolute top-2 right-2 text-gray-500 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100" @click="closePopup">
            <font-awesome-icon :icon="['fas', 'circle-xmark']" size="2x" class="p-3 text-red-500" />
            </button>
            <div class="overflow-auto max-h-full">
            <slot></slot>
            </div>
            <div v-if="footer" class="mt-4">
            <slot name="footer"></slot>
            </div>
        </div>
        </div>
    </transition>
  </template>
  
  <script setup>
    import { computed, defineEmits } from 'vue';
    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

    const props = defineProps({
    isVisible: Boolean,
    size: {
        type: String,
        default: 'medium',
        validator: (value) => ['small', 'medium', 'large', 'full'].includes(value),
    },
    title: String,
    showCloseButton: {
        type: Boolean,
        default: true,
    },
    footer: Boolean,
    });

    const emit = defineEmits(['update:isVisible']);

    function closePopup() {
    emit('update:isVisible', false);
    }

    const popupSizeClasses = computed(() => {
    switch (props.size) {
        case 'small':
        return 'w-[400px] h-[300px]'; // Small size
        case 'large':
        return 'w-[800px] h-[600px]'; // Large size
        case 'full':
        return 'w-[90vw] h-[90vh]'; // 90% of viewport size
        default:
        return 'w-[600px] h-[400px]'; // Medium size
    }
    });
  </script>
  
  <style scoped>
    .overflow-auto {
    overflow: auto;
    }

    .fixed {
    position: fixed;
    }

    .inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    }

    .z-50 {
    z-index: 50;
    }

    .bg-black {
    background-color: black;
    }

    .opacity-50 {
    opacity: 0.5;
    }

    .rounded-lg {
    border-radius: 0.5rem;
    }

    .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .p-6 {
    padding: 1.5rem;
    }

    .max-w-md {
    max-width: 28rem;
    }

    .w-full {
    width: 100%;
    }

    .relative {
    position: relative;
    }

    /* Transition styles */
    .fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s;
    }

    .fade-enter, .fade-leave-to {
    opacity: 0;
    }

    /* Button styles */
    .text-gray-500:hover {
    color: #6b7280;
    }

    .text-gray-500 {
    color: #6b7280;
    }

    .text-gray-300 {
    color: #d1d5db;
    }
  </style>