Deployment status summary card

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "square-terminal") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Card, CardContent } from "@/components/ui/card"
import { cn } from "@/lib/utils"

const stats = [
  { label: "Environment", value: "Production" },
  { label: "Region", value: "us-east-1" },
  { label: "Version", value: "v2.4.0" },
  { label: "Status", value: "Healthy" },
]
</script>

<template>
  <Card class="mx-auto w-full max-w-xs overflow-hidden p-0">
    <CardContent class="flex flex-col items-center p-0">
      <!-- Header with gradient -->
      <div class="flex w-full flex-col items-center justify-center bg-linear-to-b from-fuchsia-50/80 to-transparent py-12">
        <div class="relative mb-6">
          <div class="absolute inset-0 scale-150 rounded-full bg-fuchsia-400/10 blur-2xl" />
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-square-terminal relative size-16 text-fuchsia-600"
          ><path d="m7 11 2-2-2-2" /><path d="M11 13h4" /><rect width="18" height="18" x="3" y="3" rx="2" ry="2" /></svg>
        </div>
        <h3 class="text-foreground text-lg font-semibold">
          Deployment Successful
        </h3>
        <p class="text-muted-foreground text-sm">Your app is now live</p>
      </div>

      <!-- Status Rows -->
      <div class="w-full space-y-1 px-4 pb-6">
        <div
          v-for="(item, index) in stats"
          :key="item.label"
          :class="cn(
            'rounded-lg flex items-center justify-between px-3 py-2.5',
            index % 2 === 0 && 'bg-muted/40'
          )"
        >
          <span class="text-foreground text-sm font-medium">
            {{ item.label }}
          </span>
          <span class="text-muted-foreground text-sm">
            {{ item.value }}
          </span>
        </div>
      </div>
    </CardContent>
  </Card>
</template>