import * as React from 'react'
import { cn } from './cva'

export interface PaginationProps {
  page: number
  pageCount: number
  onPageChange(p: number): void
  label?: string
  className?: string
}

const btn = 'rounded-md border border-border bg-surface px-2 py-1 text-sm text-fg disabled:opacity-50 disabled:cursor-not-allowed'

export function Pagination({ page, pageCount, onPageChange, label = 'Pagination', className }: PaginationProps) {
  const canPrev = page > 1
  const canNext = page < pageCount
  return (
    <nav aria-label={label} className={cn('flex items-center gap-2', className)}>
      <button type="button" className={btn} disabled={!canPrev} onClick={() => canPrev && onPageChange(page - 1)}>
        Previous
      </button>
      <span aria-current="page" className="text-sm text-fg">
        {page} / {pageCount}
      </span>
      <button type="button" className={btn} disabled={!canNext} onClick={() => canNext && onPageChange(page + 1)}>
        Next
      </button>
    </nav>
  )
}