type Props = { eyebrow: string; title: string; rows?: number };

/**
 * Lightweight skeleton that mimics the AccountsTable / UsersTable shell.
 * Rendered by app/loading.tsx and app/users/loading.tsx — Next.js shows
 * this immediately on tab navigation, then streams in the real Server
 * Component once its data fetch resolves. Without it, the previous
 * route's UI freezes until the fetch finishes (the "tab switch is
 * laggy" symptom).
 *
 * The pulse animation comes from Tailwind's animate-pulse on each
 * placeholder bar; no JS, no layout shift when the real content swaps in.
 */
export default function TableSkeleton({ eyebrow, title, rows = 8 }: Props) {
  return (
    <div className="space-y-8">
      <div className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
            {eyebrow}
          </p>
          <h1 className="mt-1 text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
            {title}
            <span className="ml-2 inline-block h-4 w-8 animate-pulse rounded bg-zinc-200 align-middle" />
          </h1>
        </div>
        <div className="flex items-center gap-2">
          <span className="h-8 w-20 animate-pulse rounded-full bg-zinc-200" />
          <span className="h-8 w-16 animate-pulse rounded-full bg-zinc-200" />
        </div>
      </div>
      <ul className="space-y-2">
        {Array.from({ length: rows }).map((_, i) => (
          <li
            key={i}
            className="rounded-xl bg-white px-4 py-3 ring-1 ring-zinc-200/60"
          >
            <div className="flex items-center justify-between gap-3">
              <div className="flex min-w-0 flex-1 items-center gap-3">
                <span className="h-4 w-24 animate-pulse rounded bg-zinc-200" />
                <span className="h-4 w-16 animate-pulse rounded-full bg-zinc-100" />
              </div>
              <span className="h-6 w-6 animate-pulse rounded-md bg-zinc-100" />
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}