Spinner

"use client";

import { Button } from "@/registry/ds/button";
import { Card, CardBody, CardDescription, CardTitle } from "@/registry/ds/card";
import { Spinner } from "@/registry/ds/spinner";

/** Dónde va el spinner: en línea con el texto, tapando lo que se recarga (con aria-busy) y dentro del botón que lo causó */
export default function SpinnerContexts() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-6">
      <p className="flex items-center gap-2 text-sm text-fg-muted">
        <Spinner size="sm" label="Verificando cupo" />
        Verificando cupo en Física I…
      </p>

      <div className="relative" aria-busy="true">
        <Card padding="sm" className="opacity-60">
          <CardBody>
            <CardTitle as="h4">Cálculo II</CardTitle>
            <CardDescription>Comisión 2 · Lunes 8:00 · 12 lugares</CardDescription>
          </CardBody>
        </Card>
        <div className="absolute inset-0 flex items-center justify-center">
          <Spinner size="lg" label="Actualizando cupos" />
        </div>
      </div>

      <div className="flex gap-3">
        <Button loading>Inscribirme</Button>
        <Button variant="stroke" loading>
          Guardar
        </Button>
      </div>
    </div>
  );
}