<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>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    class: {
      type: String,
      default: '',
    },
  },

  setup(props, {slots}) {
    const hasHeader = ref(false)

    if (slots.header && slots.header().length) {
      hasHeader.value = true
    }

    return { hasHeader }
  },
})
</script>
