import clsx from 'clsx'
import React, { FC } from 'react'

import { theming } from '../../themes'
import { Button } from '../button'
import { useStyles } from './styles'

export type NextButtonProps = {
  text?: string
  className?: string
}

export const NextButton: FC<NextButtonProps> = ({ className, text = 'Next', ...props }) => {
  const { nextButton } = useStyles({ theme: theming.useTheme() })

  return (
    <Button className={clsx(nextButton, className)} {...props}>
      {text}
    </Button>
  )
}
