import React from 'react'
import { SendButtonProps } from '../models'
import zocksStyle from './SendButton.module.scss'
import { getClassName, getMergedClassNames } from '../../common'

export const SendButton: React.FC<SendButtonProps> = ({ disabled, onClick, buttonText = 'Send', styles }) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  return (
    <button
      id='zocks__send-button'
      className={getClassName('chat-input__send-button', mergedStyles)}
      disabled={disabled}
      onClick={onClick}
    >
      <label htmlFor='zocks__send-button'>{buttonText}</label>
    </button>
  )
}
