import React from 'react'
import { ATextField, ASelect, ATextArea } from '../../../../form-fields/form-field.component'
import {MettaSvr_Common} from '../../../../../redux/helpers/action-enums'

const PersonalCard = () => {
    const salutationOptions = [
        {   key: 'Select.', value: '' },
        {   key: 'Mr.', value: MettaSvr_Common.SalutationEnum.MR },
        {   key: 'Ms.', value: MettaSvr_Common.SalutationEnum.MS },
        {   key: 'Dr.', value: MettaSvr_Common.SalutationEnum.DR }
    ]

    return (

        <fieldset className="mt-4">
            <h2 className="fieldset-title">Personal Information</h2>

            <div className="form-row">
                <div className="form-group col-md-3">
                    <ASelect name="Salutation" label="Signature" options={salutationOptions}/>                    
                </div>
                <div className="form-group col-md-9">
                    <ATextField label="First Name" name="FirstName" type="text" />
                </div>
            </div>
            
            <div className="form-row">

                <div className="form-group col-md-6">
                    <ATextField label="Middle Name" name="middlename" type="text" />
                </div>
                <div className="form-group col-md-6">
                    <ATextField label="Last Name" name="LastName" type="text" />
                </div>
            </div>

            <div className="form-row">
                <div className="form-group col-md-6">
                    <ATextField label="Phone number" name="PhoneNo" type="text" />
                </div>
                <div className="form-group col-md-6">
                    <ATextField label="Email" name="Email" type="text" />
                </div>
            </div>

            
            <div className="form-row">
                <div className="form-group col-md-12">
                    <ATextArea label="Reason for Subscription" name="RegisterReason" rows="2" />
                </div>
            </div>

        </fieldset>


    )
}

export default PersonalCard