"use client";

interface PaginationGenreProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

export default function PaginationGenre({
  currentPage,
  totalPages,
  onPageChange,
}: PaginationGenreProps) {
  if (totalPages <= 1) return null;

  const pages = Array.from({ length: totalPages }, (_, i) => i + 1).filter(
    (page) =>
      page === 1 ||
      page === totalPages ||
      Math.abs(page - currentPage) <= 1
  );

  return (
    <div className="flex items-center justify-center gap-2 mt-4">
      <button
        onClick={() => onPageChange(currentPage - 1)}
        disabled={currentPage <= 1}
        className="px-3.5 py-2 rounded-xl border border-kb-line text-sm font-semibold text-kb-ink hover:bg-kb-paper-alt disabled:opacity-40 disabled:hover:bg-transparent cursor-pointer disabled:cursor-not-allowed"
      >
        Prev
      </button>

      {pages.map((page, index) => (
        <div key={page} className="flex items-center gap-2">
          {index > 0 && page - pages[index - 1] > 1 && (
            <span className="text-kb-muted">...</span>
          )}

          <button
            onClick={() => onPageChange(page)}
            className={`w-10 h-10 rounded-xl border text-sm font-semibold cursor-pointer transition-colors ${
              currentPage === page
                ? "bg-primary-600 text-white border-primary-600"
                : "bg-white text-kb-ink border-kb-line hover:bg-kb-paper-alt"
            }`}
          >
            {page}
          </button>
        </div>
      ))}

      <button
        onClick={() => onPageChange(currentPage + 1)}
        disabled={currentPage >= totalPages}
        className="px-3.5 py-2 rounded-xl border border-kb-line text-sm font-semibold text-kb-ink hover:bg-kb-paper-alt disabled:opacity-40 disabled:hover:bg-transparent cursor-pointer disabled:cursor-not-allowed"
      >
        Next
      </button>
    </div>
  );
}