"use client";

type PaginationFooterProps = {
  page: number;
  totalPages: number;
  rangeStart: number;
  rangeEnd: number;
  totalItems: number;
  itemLabel: string;
  onPrev: () => void;
  onNext: () => void;
};

export function PaginationFooter({
  page,
  totalPages,
  rangeStart,
  rangeEnd,
  totalItems,
  itemLabel,
  onPrev,
  onNext
}: PaginationFooterProps) {
  return (
    <div className="flex items-center justify-between gap-3 border-t border-line/70 px-6 py-4">
      <div className="text-sm text-slate-500">
        Menampilkan {rangeStart}-{rangeEnd} dari {totalItems} {itemLabel}
      </div>
      <div className="flex items-center gap-3">
        <div className="text-sm text-slate-500">
          Halaman {page} dari {totalPages}
        </div>
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={onPrev}
            disabled={page <= 1}
            className="ops-btn-secondary disabled:cursor-not-allowed disabled:opacity-50"
          >
            Sebelumnya
          </button>
          <button
            type="button"
            onClick={onNext}
            disabled={page >= totalPages}
            className="ops-btn-secondary disabled:cursor-not-allowed disabled:opacity-50"
          >
            Berikutnya
          </button>
        </div>
      </div>
    </div>
  );
}
