import { Alert, Badge, Card } from "@wrnexus/ui"

component UploadStatus {
  props {
    files: unknown[] = []
    title: string = "Uploaded files"
    emptyMessage: string = "No files uploaded yet."
    color: string = "primary"
    size: string = "sm"
    class: string = ""
  }
  view {
    <Card {...attrs} title='{title}' color='{color}' size='{size}' class='{class}'>
      {#if files.length == 0}<Alert title="Waiting for files" description='{emptyMessage}' color="info" variant="soft" size='{size}' />{/if}
      <div class="space-y-2">
        {#each files as file}
          <div class="flex items-center gap-3 rounded-[var(--wrn-radius-sm)] border border-[var(--wrn-color-border)] p-3">
            <span class="icon-[lucide--file-check-2] size-5 text-[var(--wrn-color-success)]"></span>
            <div class="min-w-0 flex-1"><p class="m-0 truncate text-sm font-semibold">{file.name}</p><p class="m-0 text-xs text-[var(--wrn-color-muted)]">{file.type || "File"} · {file.size || 0} bytes</p></div>
            <Badge label='{file.status || "uploaded"}' color='{file.status == "error" ? "danger" : "success"}' variant="soft" size='{size}' />
          </div>
        {/each}
      </div>
    </Card>
  }
}