import './Message2Opponent.css'
import React from 'react'

import { AppContext } from '../../context/app'

export default function Message2Opponent() {
  const [ctx, dispatchCtx] = React.useContext(AppContext)

  const setMessage = (message) => {
    dispatchCtx({ update: "newGame", message })
  }

  return (
    <div className='message2opponent'>
      <input
        placeholder='Message to opponent'
        value={ctx.newGame.message}
        maxLength={150}
        onChange={e => setMessage(e.target.value)}
      />
    </div>
  )
}