// SkeletonTableFooter.tsx

/** Skeleton del footer de paginación, imita DataTablePagination */
export function SkeletonDataTableFooter({
    pageIndex = 0,
    pageSize = 10,
    totalItems = 0,
}: {
    pageIndex?: number; // 0-based
    pageSize?: number;
    totalItems?: number;
}) {
    // Cálculo de rango (1-based visual)
    const start = totalItems > 0 ? pageIndex * pageSize + 1 : 0;
    const end = totalItems > 0 ? Math.min(start + pageSize - 1, totalItems) : 0;

    return (
        <div
            role="status"
            aria-busy="true"
            className="flex items-center justify-between border-t border-border px-4 py-3 bg-background"
        >
            {/* Izquierda: rango visible */}
            <div className="flex flex-col sm:flex-row items-center gap-4 flex-1 text-sm text-muted-foreground">
                <span aria-live="polite">
                    {/* Texto real + shimmer leve para coherencia visual */}
                    {`Mostrando ${start}–${end} de ${totalItems} registros`}
                </span>

                {/* 'Filas por página' + trigger del select simulado */}
                <div className="flex items-center gap-2">
                    <span>Filas por página</span>
                    <div
                        className="h-8 w-20 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none"
                        aria-hidden
                    />
                </div>
            </div>

            {/* Derecha: controles de paginación simulados */}
            <div className="flex items-center gap-2">
                {/* Primera */}
                <div
                    className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
                    aria-hidden
                />
                {/* Anterior */}
                <div
                    className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
                    aria-hidden
                />
                {/* Indicador de página */}
                <div className="h-5 w-28 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none" />
                {/* Siguiente */}
                <div
                    className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
                    aria-hidden
                />
                {/* Última */}
                <div
                    className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
                    aria-hidden
                />
            </div>

            <span className="sr-only">Loading pagination…</span>
        </div>
    );
}