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

import styles from './RsvpReader.css'
import { BorderMarker } from './PivotMarker'
import { Progress } from './Progress'
import { TotalTime } from './TotalTime'

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