"use client";

/**
 * Skeleton primitives — pulse-animated placeholder boxes that
 * mirror the final layout while data loads. Replaces the spinner
 * fallbacks across the admin pages.
 */

interface SkelProps {
  className?: string;
}

export function Skel({ className = "h-3 bg-slate-100 rounded" }: SkelProps) {
  return <div className={`${className} animate-pulse`} />;
}

/** Stat card skeleton — matches StatCard's footprint. */
export function StatCardSkeleton() {
  return (
    <div className="bg-white border border-slate-100 rounded-xl shadow-sm px-4 py-3.5 space-y-2">
      <Skel className="h-3 w-20 bg-slate-100 rounded" />
      <Skel className="h-7 w-24 bg-slate-200 rounded" />
      <Skel className="h-6 w-full bg-slate-100 rounded" />
    </div>
  );
}

/** Table skeleton — N rows × M columns of slate-100 placeholder cells. */
export function TableSkeleton({ rows = 6, cols = 5 }: { rows?: number; cols?: number }) {
  return (
    <div className="bg-white border border-slate-100 rounded-xl overflow-hidden shadow-sm">
      <div className="border-b border-slate-100 bg-slate-50 px-4 py-3 grid gap-3" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
        {Array.from({ length: cols }).map((_, i) => (
          <Skel key={i} className="h-3 bg-slate-200 rounded" />
        ))}
      </div>
      <div className="divide-y divide-slate-100">
        {Array.from({ length: rows }).map((_, r) => (
          <div key={r} className="px-4 py-3 grid gap-3" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
            {Array.from({ length: cols }).map((_, c) => (
              <Skel key={c} className="h-4 bg-slate-100 rounded" />
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}
