<script setup>
import Card from './Card.vue';

// Slots (Header, Body, Footer)
const props = defineProps({
    color: String,
    cardClass: String
});

const slots = defineSlots();

</script>

<template>
    <Card :class='props.cardClass + " flex justify-center flex-col border-2 border-" + props.color'>
        <slot name="header"></slot>
        <slot></slot>
        <div class="flex w-full h-full">
            <div class="self-end w-full flex justify-center">
                <slot name="footer"></slot>
            </div>
        </div>
    </Card>
</template>