<script lang="ts">
  // 빈 상태/추후 지원/검색 결과 없음 등에 사용.
  // children은 액션 슬롯 (Button 등).
  import type { Snippet } from 'svelte';

  // lucide-svelte v0.400 legacy 타입 호환을 위한 임시 IconComponent.
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  type IconComponent = any;

  interface Props {
    icon?: IconComponent;
    title: string;
    description?: string;
    children?: Snippet;
    class?: string;
  }

  let { icon: Icon, title, description, children, class: className = '', ...rest }: Props = $props();
</script>

<div
  class={'flex flex-col items-center justify-center text-center py-12 px-4 ' + className}
  {...rest}
>
  {#if Icon}
    <div class="text-faint mb-3">
      <Icon size={40} strokeWidth={1.5} />
    </div>
  {/if}
  <p class="text-sm font-medium text-text">{title}</p>
  {#if description}
    <p class="text-xs text-dim mt-1 max-w-sm">{description}</p>
  {/if}
  {#if children}
    <div class="mt-4">
      {@render children()}
    </div>
  {/if}
</div>
