Progress bar with status messages.

<!--
  Адаптировано (docs/PORTING.md §Progress): оригинал крутит `useEffect` +
  `setInterval` со случайным приращением — недетерминированно для статичного
  скриншота. Значение зафиксировано пропом (задача явно требует фиксированное
  значение для категории `progress`), поведение остального компонента не
  меняется.
-->
<script setup lang="ts">
import { Progress } from "@/components/ui/progress"

const downloadProgress = 62

function getStatusMessage(progress: number) {
  if (progress < 5) return "Initializing download..."
  if (progress < 15) return "Setting up environment..."
  if (progress < 25) return "Connecting to server..."
  if (progress < 35) return "Verifying permissions..."
  if (progress < 50) return "Downloading core files..."
  if (progress < 65) return "Downloading assets..."
  if (progress < 80) return "Downloading dependencies..."
  if (progress < 90) return "Extracting files..."
  if (progress < 95) return "Validating integrity..."
  if (progress < 100) return "Finalizing installation..."
  return "Download complete!"
}
</script>

<template>
  <div class="w-full max-w-xs space-y-2">
    <div class="flex items-center justify-between">
      <span class="text-sm font-medium">Workspace Setup</span>
      <span class="text-muted-foreground text-sm">{{ `${Math.min(Math.round(downloadProgress), 100)}%` }}</span>
    </div>
    <Progress :model-value="downloadProgress" />
    <div class="text-muted-foreground text-xs">
      {{ getStatusMessage(downloadProgress) }}
    </div>
  </div>
</template>