<template>
  <div :class="containerClass">
    <AppIcon v-if="icon" :name="icon" :class="iconClass" />
    <p :class="headlineClass">{{ headline }}</p>
    <p v-if="subtext" :class="subtextClass">{{ subtext }}</p>
    <slot name="cta" />
  </div>
</template>

<script>
import AppIcon from './AppIcon.vue'
export default {
  name: 'EmptyState',
  components: { AppIcon },
  props: {
    icon:     { type: String, default: null },
    headline: { type: String, required: true },
    subtext:  { type: String, default: '' },
    size:     { type: String, default: 'md' },
  },
  computed: {
    containerClass() {
      return this.size === 'sm'
        ? 'flex items-center gap-2 py-1 text-xs text-gray-400'
        : 'text-center py-10 px-4'
    },
    iconClass() {
      return this.size === 'sm' ? 'w-3.5 h-3.5 shrink-0' : 'w-8 h-8 mx-auto mb-3 text-gray-300'
    },
    headlineClass() {
      return this.size === 'sm' ? '' : 'text-sm font-medium text-gray-500'
    },
    subtextClass() {
      return this.size === 'sm' ? 'hidden' : 'text-xs text-gray-400 mt-1'
    },
  },
}
</script>
