<script>
  // Phase E.1 — 파이프라인 처리 단계 상태 표시.
  import { CheckCircle2, Clock } from 'lucide-svelte';

  let { doc } = $props();

  const STAGES = [
    { key: 'extracted_at', label: '추출' },
    { key: 'ai_processed_at', label: '분류' },
    { key: 'embedded_at', label: '임베딩' },
  ];
</script>

<div>
  <h4 class="text-xs font-semibold text-dim uppercase mb-1.5">처리</h4>
  <dl class="space-y-1 text-xs">
    {#each STAGES as stage}
      {@const done = !!doc[stage.key]}
      <div class="flex items-center justify-between">
        <dt class="text-dim flex items-center gap-1">
          {#if done}
            <CheckCircle2 size={10} class="text-success" />
          {:else}
            <Clock size={10} class="text-faint" />
          {/if}
          {stage.label}
        </dt>
        <dd class={done ? 'text-success' : 'text-dim'}>
          {done ? '완료' : '대기'}
        </dd>
      </div>
    {/each}
  </dl>
</div>
