Skeleton loader for a full profile page

<script setup lang="ts">
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Skeleton } from "@/components/ui/skeleton"

const stats = Array.from({ length: 3 })
const details = Array.from({ length: 4 })
</script>

<template>
  <div class="mx-auto w-full max-w-xs space-y-6">
    <!-- Profile header -->
    <Card>
      <CardHeader class="items-center gap-3">
        <Skeleton class="size-20 rounded-full" />
        <Skeleton class="h-5 w-32" />
        <Skeleton class="h-3 w-48" />
      </CardHeader>
      <CardContent class="flex justify-center gap-8">
        <div v-for="(_, i) in stats" :key="i" class="flex flex-col items-center gap-1">
          <Skeleton class="h-5 w-10" />
          <Skeleton class="h-3 w-14" />
        </div>
      </CardContent>
    </Card>

    <!-- Details section -->
    <Card>
      <CardContent class="space-y-4 pt-4">
        <Skeleton class="h-4 w-24" />
        <Separator />
        <div v-for="(_, i) in details" :key="i" class="flex items-center justify-between">
          <Skeleton class="h-3 w-20" />
          <Skeleton class="h-3 w-32" />
        </div>
      </CardContent>
    </Card>
  </div>
</template>