<script>
  let { icon: Icon = null, headline = '', message = '', actionLabel = '', onAction = null } = $props();
</script>

<div class="flex flex-col items-center justify-center gap-3 py-16 text-text-secondary">
  {#if Icon}
    <Icon size={48} strokeWidth={1} class="opacity-40 mb-1" aria-hidden="true" />
  {/if}
  {#if headline}
    <p class="font-display italic text-[28px] text-text text-center leading-tight">{headline}</p>
  {/if}
  {#if message}
    <p class="text-center max-w-xs leading-relaxed {headline ? 'text-text-tertiary' : ''}">{message}</p>
  {/if}
  {#if actionLabel && onAction}
    <button onclick={onAction}
      class="px-4 py-2 rounded-lg bg-accent text-bg text-sm font-medium hover:bg-accent-hover"
      style="transition-duration: var(--duration-ui)">
      {actionLabel}
    </button>
  {/if}
</div>
