mini-erp/mini-frontend/src/components/ui/PaginationBar.tsx

interface PaginationBarProps {
  skip: number;
  top: number;
  currentCount: number;
  totalCount?: number;
  loading?: boolean;
  onPrevious: () => void;
  onNext: () => void;
}

export default function PaginationBar({
  skip,
  top,
  currentCount,
  totalCount,
  loading = false,
  onPrevious,
  onNext,
}: PaginationBarProps) {
  const from = currentCount > 0 ? skip + 1 : 0;
  const to = skip + currentCount;

  return (
    <div className="mt-2 flex items-center justify-between border-t border-[var(--color-border-light)] pt-2">
      <div className="text-xs text-[var(--color-text-muted)]">
        Registros {from} - {to}
        {totalCount != null && totalCount > 0 ? ` de ${totalCount}` : ""}
      </div>

      <div className="flex gap-1">
        <button
          onClick={onPrevious}
          disabled={skip === 0 || loading}
          className="px-3 py-1 text-xs border border-[var(--color-border)] bg-white disabled:opacity-50 disabled:cursor-not-allowed"
        >
          ◀ Anterior
        </button>

        <button
          onClick={onNext}
          disabled={totalCount != null ? skip + top >= totalCount || loading : currentCount < top || loading}
          className="px-3 py-1 text-xs border border-[var(--color-border)] bg-white disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Siguiente ▶
        </button>
      </div>
    </div>
  );
}