import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import { ATextArea } from '../../../form-fields/form-field.component'


const DietPlanBodyComponent = (props) => {
    
    return(
        <Container>
            <Row>
                <Col xs={4}><h5>Time</h5></Col>
                <Col xs={8}><h5>Food Items</h5></Col>
            </Row>
            <hr/>
            <Row>
                <Col xs={4}><h6>Early Morning</h6></Col>
                <Col xs={8}><ATextArea rows="4" label="" name="patient.earlyMorning" type="text" /></Col>
            </Row>
            <Row>
                <Col xs={4}><h6>Breakfast</h6></Col>
                <Col xs={8}><ATextArea rows="6" label="" name="patient.breakfast" type="text" /></Col>
            </Row>
            <Row>
                <Col xs={4}><h6>Mid Morning</h6></Col>
                <Col xs={8}><ATextArea rows="4" label="" name="patient.midMorning" type="text" /></Col>
            </Row>
            <Row>
                <Col xs={4}><h6>Lunch</h6></Col>
                <Col xs={8}><ATextArea rows="8" label="" name="patient.lunch" type="text" /></Col>
            </Row>
            <Row>
                <Col xs={4}><h6>Evening</h6></Col>
                <Col xs={8}><ATextArea rows="4" label="" name="patient.evening" type="text" /></Col>
            </Row>
            <Row>
                <Col xs={4}><h6>Dinner</h6></Col>
                <Col xs={8}><ATextArea rows="8" label="" name="patient.dinner" type="text" /></Col>
            </Row>
            
            <Row>
                <Col xs={4}><h6>Guidelines</h6></Col>
            </Row>
            <Row>
                <Col xs={12}>
                    <ATextArea rows="8" label="" 
                    name="patient.guidelines" type="text" /></Col>
            </Row>
            
        </Container>
            
        
    )
}

export { DietPlanBodyComponent}