// @design-system: feedback/Skeleton
import { Skeleton } from './Skeleton';

export function VendorDashboardSkeleton() {
  return (
    <div data-testid="vendor-dashboard-skeleton" aria-hidden="true" role="presentation" className="flex flex-col gap-6 p-4 lg:p-6">
      {/* Insight banner */}
      <Skeleton className="h-16 w-full animate-none" />
      {/* KPI section */}
      <div>
        <Skeleton variant="text" className="mb-3 w-24 animate-none" />
        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <Skeleton key={i} className="h-24 animate-none" />
          ))}
        </div>
      </div>
      {/* Feed section */}
      <div>
        <Skeleton variant="text" className="mb-3 w-20 animate-none" />
        <div className="flex flex-col gap-3">
          {Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="flex items-center gap-3">
              <Skeleton variant="circle" className="size-8 animate-none" />
              <Skeleton className="h-4 w-3/4 animate-none" />
            </div>
          ))}
        </div>
      </div>
      {/* Deals section */}
      <div>
        <Skeleton variant="text" className="mb-3 w-28 animate-none" />
        <div className="flex flex-col gap-3">
          {Array.from({ length: 2 }).map((_, i) => (
            <Skeleton key={i} className="h-20 w-full animate-none" />
          ))}
        </div>
      </div>
    </div>
  );
}