Skeleton

"use client";

import { useState } from "react";
import { Avatar } from "@/registry/ds/avatar";
import { Chip } from "@/registry/ds/badge";
import { Skeleton } from "@/registry/ds/skeleton";
import { Switch } from "@/registry/ds/switch";

const docentes = [
  { nombre: "Julia Arce", materia: "Cálculo II", estado: "success" as const },
  { nombre: "Martín Ferro", materia: "Física I", estado: "warning" as const },
  { nombre: "Lucía Paz", materia: "Programación II", estado: "success" as const },
];

/** El skeleton copia la grilla del contenido real: mismas alturas y anchos, así nada salta cuando llegan los datos */
export default function SkeletonList() {
  const [loaded, setLoaded] = useState(false);

  return (
    <div className="flex w-80 flex-col gap-4">
      <Switch size="sm" label="Datos cargados" checked={loaded} onCheckedChange={setLoaded} />
      <ul className="divide-y divide-border-subtle rounded-2xl border border-border bg-bg-elevated px-4" aria-busy={!loaded} aria-label="Docentes">
        {docentes.map((d) => (
          <li key={d.nombre} className="flex items-center gap-3 py-3">
            {loaded ? (
              <>
                <Avatar size="sm" name={d.nombre} />
                <div className="min-w-0 flex-1 text-sm">
                  <p className="truncate font-medium text-fg">{d.nombre}</p>
                  <p className="truncate text-xs text-fg-muted">{d.materia}</p>
                </div>
                <Chip size="sm" status={d.estado}>
                  {d.estado === "success" ? "Disponible" : "Ocupado"}
                </Chip>
              </>
            ) : (
              <>
                <Skeleton variant="circle" width={32} height={32} />
                <div className="flex flex-1 flex-col gap-1.5">
                  <Skeleton width="55%" className="text-sm" />
                  <Skeleton width="35%" className="text-xs" />
                </div>
                <Skeleton variant="rect" width={72} height={22} className="rounded-full" />
              </>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}