import { useState } from 'react'
import logo from './../assets/react.svg'

interface ConnectFormProps {
  connectToVideo: (channelName: string) => void
}

export const ConnectForm = ({ connectToVideo } : ConnectFormProps) => {

  const [channelName, setChannelName] = useState('')

  return (
    <form>
      <img src={logo} className="logo" alt="logo" />
      <div className="card">
        <input 
          id="channelName"
          type='text'
          placeholder='Channel Name'
          value={channelName}
          onChange={(e) => {
            setChannelName(e.target.value)
          }}
        />
        <button>Connect</button>
      </div>
    </form>
  )
}