<template>
  <div class="flex flex-col items-center gap-2 rounded-xl border border-dashed border-zinc-800 px-6 py-10 text-center">
    <component :is="icon" v-if="icon" :size="32" class="text-zinc-600" :stroke-width="1.5" />
    <p class="text-sm font-medium text-zinc-300">{{ title }}</p>
    <p v-if="hint" class="max-w-sm text-xs text-zinc-500">{{ hint }}</p>
    <div v-if="$slots.action" class="mt-1">
      <slot name="action" />
    </div>
  </div>
</template>

<script setup lang="ts">
// État vide soigné (icône + titre + indice + CTA) — remplace les <p text-zinc-500> plats.
import type { Component } from 'vue';

defineProps<{ icon?: Component; title: string; hint?: string }>();
</script>
