<template>
    <div>

        <div
            v-if="showModal"
            class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
        >
            <div class="relative  my-6 mx-auto" :class="width">
                <!--content-->
                <div
                    class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-gray-50 outline-none focus:outline-none"
                >
                    <!--header-->
                    <div
                        class="flex items-start justify-between p-5 border-b border-solid border-gray-400 rounded-t"
                    >
                        <h4 class="text-2xl font-semibold">{{ title }}</h4>
                        <button class="p-1 ml-auto bg-transparent border-0 text-black opacity-8 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" v-on:click="toggleModal()" >
                            <span class="bg-transparent text-black opacity-8 h-6 w-6 text-2xl block outline-none focus:outline-none" > × </span>
                        </button>
                    </div>
                    <!--body-->
                    <div class="relative p-6 flex-auto">
                       <slot></slot>
                    </div>
                    <!--footer-->
                    <div  class="flex items-center justify-end p-6 border-t border-solid border-gray-400 rounded-b" >
                        <slot name="footer"></slot>
                    </div>
                </div>
            </div>
        </div>
        <div
            v-if="showModal"
            class="opacity-25 fixed inset-0 z-40 bg-black"
        ></div>
    </div>
</template>

<script>
export default {
    name: "small-modal",
    props: {
        openModal: {
            type: Boolean,
            default: false,
        },

        title:{
            default :'Model'
        },

        width:{
             default :'w-[400px]'
        }
    },

    data() {
        return {
            showModal : this.openModal
        }
    },
    methods: {
        toggleModal: function () {
            this.showModal = !this.showModal;
            this.$emit('toggleModel')
        },
    },

    watch:{
        openModal(e){
           this.showModal = e;
        }
    }
};
</script>
