import { className } from 'lib/css'
import Icon, { IconProps } from 'ui/components/layout/icon'

type ChatStatusActionProps = {
  handleClick: () => void
  icon: IconProps['name']
  title?: string
  srButtonText?: string
}

const ChatStatusAction = ({
  handleClick,
  icon,
  title,
  srButtonText,
}: ChatStatusActionProps) => (
  <button
    type="button"
    onClick={handleClick}
    className={className('button', 'button--primary', 'chat-status__button')}
  >
    <Icon name={icon} size="16" alt="" />
    {title}
    {srButtonText && (
      <span className={className('visually-hidden')}>{srButtonText}</span>
    )}
  </button>
)

export default ChatStatusAction