import React from 'react';
import { buildClassName } from '../../../../shared/utils/class-util';
import { Traveler } from '../../../types';
import { ControlProps, hasVisibleError } from '../travelers-form-util';

const GenderControl: React.FC<ControlProps<Traveler>> = ({ translations, value, formik, name }) => {
  return (
    <div className={buildClassName(['form__group', hasVisibleError(formik, name) && 'form__group--error'])}>
      <label className="form__label">{translations.TRAVELERS_FORM.GENDER_ID} *</label>
      <div className="radiobutton-group">
        <div className="radiobutton">
          <label className="radiobutton__label">
            <input
              type="radio"
              className="radiobutton__input"
              name={name}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              value="m"
              checked={value.gender === 'm'}
            />
            {translations.TRAVELERS_FORM.MALE_GENDER}
          </label>
        </div>

        <div className="radiobutton">
          <label className="radiobutton__label">
            <input
              type="radio"
              className="radiobutton__input"
              name={name}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              value="f"
              checked={value.gender === 'f'}
            />
            {translations.TRAVELERS_FORM.FEMALE_GENDER}
          </label>
        </div>

        {/*  <div className="radiobutton">
          <label className="radiobutton__label">
            <input
              type="radio"
              className="radiobutton__input"
              name={name}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              value="x"
              checked={value.gender === 'x'}
            />
            {translations.TRAVELERS_FORM.OTHER}
          </label>
        </div> */}
      </div>
    </div>
  );
};

export default GenderControl;