import { Button } from '~/components/ui/button'
import { cn } from '~/lib/utils'

type Props = {
  value: number
  options?: readonly number[]
  onChange: (value: number) => void
}

const DEFAULT_OPTIONS = [12, 24, 48] as const

export function PerPageSelector({ value, options = DEFAULT_OPTIONS, onChange }: Props) {
  return (
    <div className="mt-5 flex items-center justify-center gap-2">
      <span className="text-sm">Results per page:</span>
      <div className="inline-flex rounded-md border">
        {options.map((n, i) => (
          <Button
            key={n}
            variant={value === n ? 'secondary' : 'ghost'}
            size="sm"
            disabled={value === n}
            onClick={() => onChange(n)}
            className={cn(
              'rounded-none',
              i === 0 && 'rounded-l-md',
              i === options.length - 1 && 'rounded-r-md',
              i > 0 && 'border-l',
            )}
          >
            {n}
          </Button>
        ))}
      </div>
    </div>
  )
}