/** Pulse skeletons used as Suspense fallbacks (the route itself is not wrapped in loading.tsx so 308/404 status codes stay real). */
export function Bone({ className }: { className: string }) {
  return <div className={`animate-pulse rounded bg-plane-2 ${className}`} aria-hidden />;
}

export function SectionSkeleton({ rows = 8, chart = false, title }: { rows?: number; chart?: boolean; title?: string }) {
  return (
    <div className="py-6 md:py-8" role="status" aria-label={title ?? 'Loading section'}>
      <div className="mb-4 border-b border-rule pb-3">
        <Bone className="h-3 w-16" />
        <Bone className="mt-2 h-6 w-48" />
      </div>
      {chart && <Bone className="mb-6 h-44 w-full" />}
      <div className="space-y-3">
        {Array.from({ length: rows }).map((_, i) => (
          <Bone key={i} className="h-4 w-full" />
        ))}
      </div>
    </div>
  );
}

export function TableSkeleton({ rows = 12 }: { rows?: number }) {
  return (
    <div className="space-y-2" role="status" aria-label="Loading table">
      <Bone className="h-8 w-full" />
      {Array.from({ length: rows }).map((_, i) => (
        <Bone key={i} className="h-10 w-full" />
      ))}
    </div>
  );
}