import Button from './Button'

const Pagination = ({ currentPage, totalPages, onPageChange, className = '' }) => {
  const pages = []
  const maxButtons = 5

  if (totalPages <= maxButtons) {
    for (let i = 1; i <= totalPages; i++) {
      pages.push(i)
    }
  } else {
    pages.push(1)
    if (currentPage > 3) pages.push('...')
    for (
      let i = Math.max(2, currentPage - 1);
      i <= Math.min(totalPages - 1, currentPage + 1);
      i++
    ) {
      if (!pages.includes(i)) pages.push(i)
    }
    if (currentPage < totalPages - 2) pages.push('...')
    pages.push(totalPages)
  }

  return (
    <div className={`flex items-center justify-center gap-2 ${className}`}>
      <Button
        onClick={() => onPageChange(currentPage - 1)}
        disabled={currentPage === 1}
        variant="outline"
        size="sm"
      >
        ← Previous
      </Button>

      {pages.map((page, idx) => (
        <button
          key={idx}
          onClick={() => typeof page === 'number' && onPageChange(page)}
          disabled={page === '...'}
          className={`
            px-3 py-2 rounded-lg text-sm font-semibold transition-all
            ${page === currentPage
              ? 'bg-gradient-to-r from-[#2AA8B8] to-[#F5A623] text-white shadow-md'
              : page === '...'
                ? 'cursor-default text-gray-500'
                : 'bg-gray-200 dark:bg-slate-700 text-gray-900 dark:text-white hover:bg-gray-300 dark:hover:bg-slate-600'
            }
            ${page === '...' ? 'cursor-default' : 'cursor-pointer'}
          `}
        >
          {page}
        </button>
      ))}

      <Button
        onClick={() => onPageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
        variant="outline"
        size="sm"
      >
        Next →
      </Button>
    </div>
  )
}

export default Pagination
