interface PaginationControlsProps {
  page: number
  pageCount: number
  onPageChange: (page: number) => void
  label?: string
  className?: string
}

export default function PaginationControls({
  page,
  pageCount,
  onPageChange,
  label = 'Rows',
  className = '',
}: PaginationControlsProps) {
  if (pageCount <= 1) return null

  const pages = Array.from({ length: pageCount }, (_, index) => index + 1)

  return (
    <div className={`mt-4 flex flex-wrap items-center justify-between gap-3 ${className}`}>
      <div className="text-sm text-gray-600 dark:text-gray-400">
        {label}: page {page} of {pageCount}
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <button
          type="button"
          onClick={() => onPageChange(Math.max(1, page - 1))}
          disabled={page <= 1}
          className="rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 transition hover:border-primary-400 hover:text-primary-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-300 dark:hover:text-primary-300"
        >
          Previous
        </button>
        {pages.map((candidate) => (
          <button
            key={candidate}
            type="button"
            onClick={() => onPageChange(candidate)}
            aria-current={candidate === page ? 'page' : undefined}
            className={
              candidate === page
                ? 'rounded-lg bg-primary-600 px-3 py-2 text-sm font-semibold text-white'
                : 'rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 transition hover:border-primary-400 hover:text-primary-700 dark:border-gray-700 dark:text-gray-300 dark:hover:text-primary-300'
            }
          >
            {candidate}
          </button>
        ))}
        <button
          type="button"
          onClick={() => onPageChange(Math.min(pageCount, page + 1))}
          disabled={page >= pageCount}
          className="rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 transition hover:border-primary-400 hover:text-primary-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-300 dark:hover:text-primary-300"
        >
          Next
        </button>
      </div>
    </div>
  )
}
