<!-- #region EmptyState [C:2] [TYPE Component] [SEMANTICS empty-state, zero-state, placeholder, ui, atom] -->
<!-- @ingroup UI -->
<!-- @BRIEF Standardized empty/zero-state placeholder with icon, title, description, and optional CTA button. -->
<!-- @LAYER UI -->
<!-- @UX_STATE Empty -> Centered icon + message + optional action button rendered. -->
<!-- @RESTRICTION Icon is optional; falls back to a generic document icon. -->
<script lang="ts">
  import { cn } from "$lib/utils.js";
  import { Button } from "$lib/ui";

  let {
    icon: iconSlot = null,
    title = "",
    description = "",
    actionLabel = "",
    actionVariant = "primary",
    onAction,
    class: className = "",
  } = $props();
</script>

<div class={cn("flex flex-col items-center justify-center py-12 px-4 text-center", className)}>
  {#if iconSlot}
    <div class="text-text-subtle mb-4">
      {@render iconSlot()}
    </div>
  {:else}
    <svg class="w-16 h-16 text-text-subtle mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
    </svg>
  {/if}
  {#if title}
    <h3 class="text-lg font-semibold text-text mb-1">{title}</h3>
  {/if}
  {#if description}
    <p class="text-sm text-text-muted max-w-md">{description}</p>
  {/if}
  {#if actionLabel && onAction}
    <div class="mt-6">
      <Button variant={actionVariant} onclick={onAction}>
        {actionLabel}
      </Button>
    </div>
  {/if}
</div>
<!-- #endregion EmptyState -->