<script lang="ts">
  import { Loader2, Check } from 'lucide-svelte';

  type Props = { state: 'pending' | 'in_progress' | 'done' | 'skipped' };
  let { state }: Props = $props();
</script>

{#if state === 'in_progress'}
  <span class="inline-flex items-center gap-1 text-xs text-action-primary">
    <Loader2 size={12} class="animate-spin" />
    Processing
  </span>
{:else if state === 'done'}
  <span class="inline-flex items-center gap-1 text-xs text-action-primary">
    <Check size={12} />
    Done
  </span>
{:else if state === 'pending'}
  <span class="text-xs text-text-muted">Pending</span>
{:else}
  <span class="text-xs text-text-muted">Skipped</span>
{/if}
