/**
 * Skeleton de carregamento.
 *
 * O varrimento horizontal (ver .loading-skeleton em netscreen.css) imita
 * um painel LED a refrescar. Respeita prefers-reduced-motion.
 */

function Skeleton({ className = '' }) {
  return <div className={`loading-skeleton ${className}`} />;
}

/** Linha de KPIs em carregamento — usada no dashboard e nos resultados. */
function SkeletonKpis({ n = 4 }) {
  return (
    <div className="grid grid-cols-1 gap-px bg-border sm:grid-cols-2 lg:grid-cols-4">
      {Array.from({ length: n }).map((_, i) => (
        <div key={i} className="bg-card p-6">
          <Skeleton className="h-3 w-24" />
          <Skeleton className="mt-4 h-9 w-16" />
        </div>
      ))}
    </div>
  );
}

/** Linhas de tabela em carregamento. */
function SkeletonTabela({ linhas = 5 }) {
  return (
    <div className="space-y-px bg-border">
      {Array.from({ length: linhas }).map((_, i) => (
        <div key={i} className="flex items-center gap-4 bg-card px-4 py-3">
          <Skeleton className="h-4 w-1/3" />
          <Skeleton className="h-4 w-1/5" />
          <Skeleton className="ml-auto h-4 w-16" />
        </div>
      ))}
    </div>
  );
}