<script setup lang="ts">
/**
 * EmptyState — zero-data placeholder with icon, title, description, and an
 * optional action slot (pass a Button or link).
 *
 * Icon registry note: default icon 'inbox' is not in the registry — it will
 * silently not render per Icon.vue's null guard. Callers should pass a
 * registered icon name (e.g. icon="server", icon="folder-open").
 */
import Icon from '@/components/ds/core/Icon.vue'

withDefaults(
  defineProps<{
    icon?: string
    title?: string
    description?: string
  }>(),
  { icon: 'inbox' },
)
</script>

<template>
  <div class="cc-empty">
    <div class="cc-empty__icon">
      <Icon :name="icon" :size="22" :stroke-width="1.75" />
    </div>
    <div v-if="title" class="cc-empty__title">{{ title }}</div>
    <div v-if="description" class="cc-empty__desc">{{ description }}</div>
    <div v-if="$slots.action" class="cc-empty__action"><slot name="action" /></div>
  </div>
</template>

<style>
.cc-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; padding:36px 24px; }
.cc-empty__icon { width:46px; height:46px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; margin-bottom:8px; color:var(--text-tertiary); background:var(--surface-raised-2); box-shadow:var(--ring-default); }
.cc-empty__title { font-size:var(--text-base); font-weight:600; color:var(--text-primary); }
.cc-empty__desc { font-size:var(--text-sm); color:var(--text-tertiary); max-width:340px; line-height:1.5; }
.cc-empty__action { margin-top:12px; }
</style>
