export function SectionLoadingCard({
  label,
  testId,
}: {
  label: string;
  testId?: string;
}) {
  return (
    <section
      data-testid={testId}
      className="flex min-h-28 items-center justify-center rounded-lg border border-surface-2 bg-surface-0 p-4"
    >
      <div className="flex items-center gap-3" role="progressbar" aria-label={label}>
        <span className="h-6 w-6 rounded-full border-2 border-surface-2 border-t-accent animate-spin" />
        <span className="grid gap-1.5" aria-hidden="true">
          <span className="h-2 w-28 rounded-full bg-surface-2/70" />
          <span className="h-2 w-20 rounded-full bg-surface-2/40" />
        </span>
      </div>
    </section>
  );
}