<script setup lang="ts">
defineProps<{
  title?: string
  subtitle?: string
}>()
</script>

<template>
  <div class="nych-card">
    <div v-if="$slots.image" class="nych-card-header">
      <slot name="image" />
    </div>
    <div class="nych-card-body">
      <div v-if="title || subtitle || $slots.title" class="nych-card-caption">
        <div v-if="title || $slots.title" class="nych-card-title">
          <slot name="title">{{ title }}</slot>
        </div>
        <div v-if="subtitle" class="nych-card-subtitle">{{ subtitle }}</div>
      </div>
      <div v-if="$slots.default" class="nych-card-content">
        <slot />
      </div>
      <div v-if="$slots.footer" class="nych-card-footer">
        <slot name="footer" />
      </div>
    </div>
  </div>
</template>
