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

export const LeaveButton: React.FC<LeaveButtonProps> = ({ leaveAction, styles }) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)
  return (
    <button
      className={`${getClassName('leave-button', mergedStyles)} ${getClassName('control-button', mergedStyles)}`}
      onClick={leaveAction}
      id='zocks__leave-button'
    >
      <label htmlFor='zocks__leave-button'>Leave</label>
    </button>
  )
}
