// components/Skeleton.tsx
// Lightweight shimmer placeholder. Used while server components
// stream in the initial paint, and inside client explorers while
// TanStack Query is fetching subsequent pages.

interface SkeletonProps {
  className?: string;
}

export default function Skeleton({ className = "" }: SkeletonProps) {
  return (
    <div
      aria-hidden="true"
      className={
        "relative overflow-hidden bg-surface-warm rounded-md " +
        className
      }
    >
      <span
        className="absolute inset-0 animate-pulse"
        style={{
          background:
            "linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent)"
        }}
      />
    </div>
  );
}