<script setup>
import Modal from '@/Components/Modal.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import SecondaryButton from '@/Components/SecondaryButton.vue';

defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        required: true,
    },
    submitLabel: {
        type: String,
        default: 'Enregistrer',
    },
    processing: {
        type: Boolean,
        default: false,
    },
    maxWidth: {
        type: String,
        default: '2xl',
    },
});

const emit = defineEmits(['close', 'submit']);
</script>

<template>
    <Modal :show="show" :max-width="maxWidth" @close="emit('close')">
        <form class="flex max-h-[calc(100vh-6rem)] flex-col" @submit.prevent="emit('submit')">
            <div class="border-b border-slate-200 px-6 py-4">
                <h2 class="text-lg font-semibold text-slate-900">
                    {{ title }}
                </h2>
            </div>

            <div class="overflow-y-auto px-6 py-5">
                <slot />
            </div>

            <div class="flex justify-end gap-3 border-t border-slate-200 bg-slate-50 px-6 py-4">
                <SecondaryButton type="button" :disabled="processing" @click="emit('close')">
                    Annuler
                </SecondaryButton>
                <PrimaryButton type="submit" :disabled="processing">
                    {{ submitLabel }}
                </PrimaryButton>
            </div>
        </form>
    </Modal>
</template>
