<script setup>
import { computed, useSlots } from 'vue'

const props = defineProps({
  class: {
    type: String,
    default: '',
  },
})

// computed properties
const hasHeader = computed(() => !! useSlots().header);

// watchers

// lifecycle hooks

// methods

</script>

<template>
    <div class="card" :class="class">
        <div class="card-header" v-if="hasHeader">
            <slot name="header"></slot>
        </div>
        <div class="card-body">
            <slot name="content"></slot>
        </div>
    </div>
</template>
