import React from 'react'
import { TextInput } from './TextInput'
import { TextOutput } from './TextOutput'
import { SegmentControl } from './SegmentControl'
import { RsvpSegment } from './RsvpSegment'
import { Options } from './Options'
import { PlayerControl } from './PlayerControl'

import styles from './RsvpReader.css'

export const RsvpReader = () => {
  return (
    <div className={styles.container}>
      <div className={styles.item}>
        <TextInput />
      </div>
      <div className={styles.mainItem}>
        <RsvpSegment />
        <SegmentControl>
          <PlayerControl />
        </SegmentControl>
        <Options></Options>
      </div>
      <div className={styles.item}>
        <TextOutput />
      </div>
    </div>
  )
}
