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

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

export type ButtonProps = {
  children: ReactNode
  className?: string
  disabled?: boolean
  onClick?: () => void
}

export const Button: FC<ButtonProps> = ({ className, onClick, disabled = false, children, ...props }) => {
  const { button, buttonDisabled } = useStyles({ theme: theming.useTheme() })

  return (
    <button
      onClick={onClick}
      className={clsx(button, className, disabled && buttonDisabled)}
      disabled={disabled}
      {...props}
    >
      {children}
    </button>
  )
}
