"use client";

import { Skeleton } from "@/components/ui/skeleton";

export function SalesTargetsSummarySkeleton() {
  return (
    <section aria-label="Loading period summary">
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <div
            key={i}
            className="flex flex-col gap-2 rounded-xl border border-border p-4"
          >
            <Skeleton className="h-3 w-24 rounded bg-border/70" />
            <Skeleton className="h-6 w-16 rounded bg-border/60" />
            <Skeleton className="h-3 w-20 rounded bg-border/50" />
          </div>
        ))}
      </div>
    </section>
  );
}