import React from 'react'
import Form from 'react-uikit/form'
import InvestmentApproachInput from 'components/investment-approach-input'
import inputNames from 'common-fe/constants/input-names'
import content from '../../content'
import styles from './styles.scss'
import BEMModule from 'utils/bem'

const bem = new BEMModule(styles)

const InvestmentApproach = () => {
    const id = 'investment-approach'
    const inputName = inputNames.INVESTMENT_APPROACH
    const labelClasses = bem.classNames(
        'c-portfolio-onboarding-form__investment-approach-label'
    )
    const inputClasses = bem.classNames(
        'c-portfolio-onboarding-form__investment-approach-input'
    )
    const contentClasses = bem.classNames(
        'c-portfolio-onboarding-form__investment-approach-content'
    )

    return (
        <React.Fragment>
            <label className={labelClasses} htmlFor={id}>
                My Investment Approach:
            </label>

            <Form.Field
                className={inputClasses}
                id={id}
                name={inputName}
                render={InvestmentApproachInput}
            />

            <p className={contentClasses}>{content[inputName]}</p>
        </React.Fragment>
    )
}

export default InvestmentApproach