<script setup lang="ts">
withDefaults(
    defineProps<{
        maxWidth?: string | number;
        centered?: boolean;
    }>(),
    {
        maxWidth: 480,
        centered: true,
    },
);
</script>

<template>
    <VCard
        variant="outlined"
        class="pa-6"
        :class="{ 'mx-auto': centered }"
        :style="{
            maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
        }"
    >
        <div v-if="$slots.header" class="mb-6">
            <slot name="header" />
        </div>

        <slot />

        <template v-if="$slots.footer">
            <VDivider class="my-6" />
            <div class="text-body-2 text-medium-emphasis text-center">
                <slot name="footer" />
            </div>
        </template>
    </VCard>
</template>
