src/app/components/Pagination.tsx

import React from 'react';

type PaginationProps = {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
};

export default function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
  return (
    <div className="mt-4 flex items-center justify-between">
      <button
        onClick={() => onPageChange(Math.max(currentPage - 1, 1))}
        disabled={currentPage === 1}
        className={`px-4 py-2 rounded-md mr-2 ${
          currentPage === 1
            ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed'
            : 'bg-blue-500 dark:bg-blue-600 text-white'
        }`}
      >
        &lt;
      </button>
      <div className="flex items-center space-x-2">
        {currentPage > 1 && (
          <>
            <button
              onClick={() => onPageChange(1)}
              className="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md"
            >
              1
            </button>
            {currentPage > 2 && <span className="text-gray-500">...</span>}
          </>
        )}
        {[...Array(5)].map((_, i) => {
          const page = currentPage + i - 2;
          if (page >= 1 && page <= totalPages) {
            return (
              <button
                key={page}
                onClick={() => onPageChange(page)}
                className={`px-2 py-1 rounded-md ${
                  page === currentPage
                    ? 'bg-blue-500 dark:bg-blue-600 text-white'
                    : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200'
                }`}
              >
                {page}
              </button>
            );
          }
          return null;
        })}
        {currentPage < totalPages && (
          <>
            {currentPage < totalPages - 1 && <span className="text-gray-500">...</span>}
            <button
              onClick={() => onPageChange(totalPages)}
              className="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md"
            >
              {totalPages}
            </button>
          </>
        )}
      </div>
      <button
        onClick={() => onPageChange(Math.min(currentPage + 1, totalPages))}
        disabled={currentPage === totalPages}
        className={`px-4 py-2 rounded-md ${
          currentPage === totalPages
            ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed'
            : 'bg-blue-500 dark:bg-blue-600 text-white'
        }`}
      >
        &gt;
      </button>
    </div>
  );
}