import React from 'react'
import { getClassName, getMergedClassNames, StyledComponent } from '../../common'
import zocksStyle from './JoinPageHeader.module.scss'

export const JoinPageHeader: React.FC<StyledComponent> = ({ styles }) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)
  return (
    <div className={getClassName('join-page__header', mergedStyles)}>
      <div className={getClassName('join-page__header-greetings', mergedStyles)}>Welcome Back!</div>
      <div className={getClassName('join-page__header-meeting-id-info', mergedStyles)}>
        Enter your meeting ID to join the meeting
      </div>
    </div>
  )
}
