<script lang="ts">
  import type { Snippet } from 'svelte';

  // Reusable empty-state card. Use the `actions` snippet to render the
  // onramp button(s). Variant `block` is a soft card for whole-tab
  // emptiness; `inline` is a single paragraph with link affordances
  // for sub-sections that sit inside a populated tab.

  let {
    title,
    hint,
    variant = 'block',
    actions
  }: {
    title: string;
    hint?: string;
    variant?: 'block' | 'inline';
    actions?: Snippet;
  } = $props();
</script>

{#if variant === 'block'}
  <div class="rounded-md border border-border bg-surface/40 px-6 py-10 text-center">
    <h3 class="font-display text-lg font-medium text-text-primary">{title}</h3>
    {#if hint}
      <p class="mt-1 text-sm text-text-secondary">{hint}</p>
    {/if}
    {#if actions}
      <div class="mt-4 flex flex-wrap justify-center gap-2">
        {@render actions()}
      </div>
    {/if}
  </div>
{:else}
  <p class="text-sm text-text-secondary">
    {title}
    {#if hint} <span>{hint}</span>{/if}
    {#if actions}
      <span class="ml-1">{@render actions()}</span>
    {/if}
  </p>
{/if}
