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

export const JoinPageErrorComponent: React.FC<JoinPageErrorComponentProps> = ({ message, styles }) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  return (
    <div className={getClassName('join-page-error__container', mergedStyles)}>
      <div className={getClassName('join-page-error__container-text', mergedStyles)}>{message}</div>
    </div>
  )
}
