import React from 'react'
import RequiredSVG from '@epicformbuilder/admin/images/settings/required.svg?react'

export default function Required ({ htmlId, id, required, errorEmptyData, onChange, requiredHintText  = null }) {
  return (
    <div className="component-settings__section">
      <div className="component-settings__row-flex">
        <div className="component-settings__title">
          <RequiredSVG/>
          Required
        </div>
        <div className="switch__container">
          <label className="switch" htmlFor={ `${ htmlId }-settings-required` }>
            <input
              id={ `${ htmlId }-settings-required` }
              type="checkbox"
              checked={ required }
              onChange={ onChange(id, 'required') }
            />
            <div className="slider round"/>
          </label>
        </div>
      </div>
      <div className="component-settings__row">
        <div className="component-settings__title-small">
          Error message for required field
        </div>
        <input
          type="text"
          className="input-default input-default_dark"
          value={ errorEmptyData }
          onChange={ onChange(id, 'errorEmptyData') }
        />
        <div className="component-settings__description">
          {requiredHintText !== null ? requiredHintText : 'Set the error message displayed when a required field is left empty.'}
        </div>
      </div>
    </div>
  )
}