<script setup lang="ts">
interface Transfer {
  id: string
  path: string
  total: number
  bytes: number
  direction: 'download' | 'upload'
}

defineProps<{
  transfers: Transfer[]
}>()

function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
}

function progressPercent(transfer: Transfer): number {
  if (!transfer.total) return 0
  return Math.round((transfer.bytes / transfer.total) * 100)
}
</script>

<template>
  <div v-if="transfers.length" class="bg-gray-900 border-t border-gray-800 px-3 py-2 shrink-0">
    <div v-for="transfer in transfers" :key="transfer.id" class="flex items-center gap-3 text-xs mb-1">
      <span class="text-gray-500">{{ transfer.direction === 'download' ? '↓' : '↑' }}</span>
      <span class="text-gray-400 truncate max-w-[200px] font-mono">{{ transfer.path.split('/').pop() }}</span>
      <div class="flex-1 bg-gray-800 rounded-full h-1.5">
        <div
          class="bg-wraith-500 h-1.5 rounded-full transition-all"
          :style="{ width: progressPercent(transfer) + '%' }"
        />
      </div>
      <span class="text-gray-500 shrink-0">
        {{ formatSize(transfer.bytes) }} / {{ formatSize(transfer.total) }}
      </span>
      <span class="text-gray-600 shrink-0">{{ progressPercent(transfer) }}%</span>
    </div>
  </div>
</template>
