import Link from 'next/link'
import React from 'react'

type PaginationNavProps = {
  page: number
  totalPages: number
  basePath: string
}

export const PaginationNav: React.FC<PaginationNavProps> = ({ page, totalPages, basePath }) => {
  if (totalPages <= 1) return null

  const hasPrev = page > 1
  const hasNext = page < totalPages

  const pageUrl = (p: number) => `${basePath}?page=${p}`

  return (
    <div className="flex items-center justify-center gap-2 my-8">
      {hasPrev ? (
        <Link
          href={pageUrl(page - 1)}
          className="px-4 py-2 rounded-lg border border-border text-sm hover:bg-accent transition-colors"
        >
          ← Trước
        </Link>
      ) : (
        <span className="px-4 py-2 rounded-lg border border-border text-sm opacity-40 cursor-not-allowed">
          ← Trước
        </span>
      )}

      <span className="text-sm text-muted-foreground px-2">
        Trang {page} / {totalPages}
      </span>

      {hasNext ? (
        <Link
          href={pageUrl(page + 1)}
          className="px-4 py-2 rounded-lg border border-border text-sm hover:bg-accent transition-colors"
        >
          Sau →
        </Link>
      ) : (
        <span className="px-4 py-2 rounded-lg border border-border text-sm opacity-40 cursor-not-allowed">
          Sau →
        </span>
      )}
    </div>
  )
}