<script lang="ts" setup>
import { Skeleton } from '../ui/skeleton';
</script>

<template>
  <div
    class="flex flex-col h-full bg-[#0B0F1A] rounded-xl border border-surface-border overflow-hidden shadow-md animate-pulse"
  >
    <!-- Image skeleton -->
    <Skeleton
      class="w-full h-[200px] sm:h-[200px] md:h-[200px] lg:h-[216px] rounded-t-xl"
    />

    <div class="p-4 flex flex-col gap-3">
      <!-- Category label -->
      <Skeleton class="w-24 h-4 rounded-full" />

      <!-- Title -->
      <Skeleton class="w-[90%] h-6 rounded-md" />
      <Skeleton class="w-[70%] h-6 rounded-md" />

      <!-- Description lines -->
      <Skeleton class="w-[95%] h-4 rounded-md" />
      <Skeleton class="w-[90%] h-4 rounded-md" />
      <Skeleton class="w-[85%] h-4 rounded-md" />

      <!-- Button -->
      <div class="mt-4">
        <Skeleton class="w-28 h-9 rounded-lg" />
      </div>
    </div>
  </div>
</template>
