import React from 'react'
import styled from 'styled-components'
import { TextInput } from './TextInput'
import { TextOutput } from './TextOutput'
import { MainControl } from './MainControl'
import { RsvpSegment } from './RsvpSegment'
import { RsvpOptions } from './RsvpOptions'
import { RsvpPlayer } from './RsvpPlayer'

const FlexRow = styled.div`
  display: flex;
`

const FlexItem = styled.div`
  flex: ${props => props.flex || 1};
  border: 1px solid black;
`

export const RsvpReader = () => {
  return (
    <FlexRow>
      <FlexItem>
        <TextInput />
      </FlexItem>
      <FlexItem flex={2}>
        <RsvpSegment />
        <MainControl></MainControl>
        <RsvpOptions></RsvpOptions>
        <RsvpPlayer />
      </FlexItem>
      <FlexItem>
        <TextOutput />
      </FlexItem>
    </FlexRow>
  )
}