"use client";

import { Card, CardBody, Skeleton } from "@heroui/react";

export default function StatsCardsSkeleton() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {[1, 2, 3, 4].map((index) => (
        <Card
          key={index}
          className="bg-bg-surface dark:bg-gray-800 border border-border-gray dark:border-gray-700 rounded-[2rem]"
        >
          <CardBody className="py-6 px-6">
            <div className="flex flex-col gap-3">
              {/* Label Skeleton */}
              <Skeleton className="h-4 w-32 rounded" />

              {/* Value Skeleton */}
              <div className="flex items-center gap-2">
                <Skeleton className="h-8 w-28 rounded" />
              </div>

              {/* Change Badge Skeleton */}
              <Skeleton className="h-5 w-16 rounded-full" />
            </div>
          </CardBody>
        </Card>
      ))}
    </div>
  );
}