/** Loading placeholder block. Use instead of a bare "Loading…" string wherever the eventual
 *  content has a predictable shape (cards, table rows, stat tiles). */
export function Skeleton({ className }: { className?: string }) {
  return <div className={`skeleton bg-raised rounded-md ${className ?? "h-4 w-full"}`} />;
}

export function SkeletonCard() {
  return (
    <div className="bg-surface border border-line rounded-xl p-4 space-y-3">
      <Skeleton className="h-4 w-1/3" />
      <Skeleton className="h-3 w-2/3" />
      <Skeleton className="h-3 w-1/2" />
    </div>
  );
}

export function SkeletonRow({ cols = 5 }: { cols?: number }) {
  return (
    <tr className="border-b border-line">
      {Array.from({ length: cols }).map((_, i) => (
        <td key={i} className="px-4 py-3">
          <Skeleton className="h-3 w-full max-w-[8rem]" />
        </td>
      ))}
    </tr>
  );
}