import Link from 'next/link'
import clsx from 'clsx'

interface PaginationProps {
  current: number
  total: number
  basePath: string
  className?: string
}

function pageUrl(basePath: string, page: number): string {
  if (page <= 1) return basePath
  return `${basePath}/page/${page}`
}

export function Pagination({ current, total, basePath, className }: PaginationProps) {
  const btnBase =
    'font-mono text-[11px] tracking-wider uppercase px-4 py-2.5 border rounded-sm transition-colors'
  const btnActive = `${btnBase} text-ink border-hair-2 hover:border-ink`
  const btnDisabled = `${btnBase} text-ink-3 border-white/5 cursor-default`

  const prevUrl = current > 1 ? pageUrl(basePath, current - 1) : null
  const nextUrl = current < total ? pageUrl(basePath, current + 1) : null

  return (
    <nav
      aria-label="Pagination"
      className={clsx('border-hair flex items-center justify-between gap-4 border-t py-5', className)}
    >
      {prevUrl ? (
        <Link
          className={btnActive}
          href={prevUrl}
          aria-label={`Go to page ${current - 1} of ${total}`}
        >
          ← Previous
        </Link>
      ) : (
        <span className={btnDisabled}>← Previous</span>
      )}
      <span
        className="text-ink-3 font-mono text-[11px] tracking-[0.14em] uppercase"
        aria-current="page"
      >
        Page {current} of {total}
      </span>
      {nextUrl ? (
        <Link
          className={btnActive}
          href={nextUrl}
          aria-label={`Go to page ${current + 1} of ${total}`}
        >
          Next →
        </Link>
      ) : (
        <span className={btnDisabled}>Next →</span>
      )}
    </nav>
  )
}