Multi-step progress indicator

<!--
  Адаптировано (docs/PORTING.md §5): `IconPlaceholder` заменён инлайновым
  `<svg>` (пути lucide "circle-check"/"circle"), теми же, что и в
  React-эталоне.
-->
<script setup lang="ts">
import { Progress } from "@/components/ui/progress"

const steps = [
  { label: "Account", completed: true },
  { label: "Profile", completed: true },
  { label: "Preferences", completed: false },
  { label: "Review", completed: false },
]

const completedSteps = steps.filter((s) => s.completed).length
const progressValue = (completedSteps / steps.length) * 100
</script>

<template>
  <div class="mx-auto w-full max-w-xs space-y-4">
    <div class="flex items-center justify-between">
      <span class="text-sm font-medium">Setup Progress</span>
      <span class="text-muted-foreground text-xs">{{ `${completedSteps} of ${steps.length} steps` }}</span>
    </div>
    <Progress :model-value="progressValue" />
    <div class="flex flex-col gap-2">
      <div v-for="step in steps" :key="step.label" class="flex items-center gap-2 text-sm">
        <svg
          v-if="step.completed"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="text-success size-4"
        >
          <circle cx="12" cy="12" r="10" />
          <path d="m9 12 2 2 4-4" />
        </svg>
        <svg
          v-else
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="text-muted-foreground size-4"
        >
          <circle cx="12" cy="12" r="10" />
        </svg>
        <span :class="step.completed ? 'text-foreground' : 'text-muted-foreground'">{{ step.label }}</span>
      </div>
    </div>
  </div>
</template>