<template>
    <Modal
        @closed="closedModal"
        :size="size"
        :ref="ref"
        :closeButton="closeButton"
        :color="color"
        padding="none"
        class="form-small-button"
    >
        <template v-if="title">
            <div class="container flex items-start justify-between w-full py-4">
                <h4 class="text-lg font-semibold text-gray-300">
                    {{ title }}
                </h4>
                <div class="flex items-center gap-2.5">
                    <slot name="actions"></slot>
                    <button class="p-1" type="button" @click="close">
                        <svg
                            fill="none"
                            height="21"
                            viewBox="0 0 21 21"
                            width="21"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M16.4845 5.84175L15.3095 4.66675L10.6512 9.32508L5.99287 4.66675L4.81787 5.84175L9.4762 10.5001L4.81787 15.1584L5.99287 16.3334L10.6512 11.6751L15.3095 16.3334L16.4845 15.1584L11.8262 10.5001L16.4845 5.84175Z"
                                fill="#5E6278"
                            />
                        </svg>
                    </button>
                </div>
            </div>
            <hr
                class="mb-5"
                :class="color == 'blue' ? 'border-gray-200' : null"
            />
        </template>
        <slot></slot>
    </Modal>
</template>

<script>
import Modal from "./Modal.vue";
export default {
    props: {
        closedModal: {
            type: Function,
            default: () => {},
        },
        size: {
            type: String,
            default: "2xl",
        },
        closeButton: {
            type: Boolean,
            default: false,
        },
        ref: {
            type: String,
            default: "modal",
        },
        title: String,
        color: {
            type: String,
            default: "white",
        },
    },
    components: {
        Modal,
    },
    methods: {
        open() {
            this.$refs[this.ref].open();
        },
        close() {
            this.$refs[this.ref].close();
        },
    },
};
</script>

<style></style>
