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

const DietPlanPatientInfoComponent = (props) => {
    
    return(
        <Container>
            <Row>
                <Col><h5>Patient Details</h5></Col>                
            </Row>
            <hr/>
            <Row>
                <Col xs={3} ><h6>Name:</h6></Col>                
                <Col xs={9} ><ATextField label="" name="patient.name" type="text" /></Col>                
            </Row>
            <Row>
                <Col xs={3} ><h6>Age:</h6></Col>                
                <Col xs={9} ><ATextField label="" name="patient.age" type="text" /></Col>                
            </Row>
            <Row>
                <Col xs={3}><h6>Ht:</h6></Col>                
                <Col xs={9}><ATextField label="" name="patient.height" type="text" /></Col>                
            </Row>
            <Row>
                <Col xs={3}><h6>Wt:</h6></Col>                
                <Col xs={9}><ATextField label="" name="patient.weight" type="text" /></Col>                
            </Row>
            <Row>
            
                <Col xs={3}><h6>BMI:</h6></Col>                
                <Col xs={9}><ATextField label="" name="patient.bmi" type="text" /></Col>                
            </Row>
            <Row>
            
                <Col xs={3}><h6>IBW:</h6></Col>                
                <Col xs={9}><ATextField label="" name="patient.ibw" type="text" /></Col>                
            </Row>
            <Row>
            
                <Col xs={5} md={3}><h6>Medical condition:</h6></Col>                
                <Col xs={7} md={9}><ATextArea rows="4" label="" name="patient.condition" type="text" /></Col>                
            </Row>
            <Row>
            
                <Col xs={5} md={3}><h6>Total Calorie Intake with distribution:</h6></Col>                
                <Col xs={7} md={9}><ATextArea rows="4" label="" name="patient.calories" type="text" /></Col>                
            </Row>
        </Container>        
    )
}

export { DietPlanPatientInfoComponent }