import React from 'react'
import LabelSVG from '@epicformbuilder/admin/images/label.svg?react'

export default function Label ({ htmlId, id, showLabel, label, onChange }) {
  return (
    /*LABEL SETTINGS*/
    <div className="component-settings__section">
      <div className="component-settings__row-flex">
        <div className="component-settings__title">
          <LabelSVG/>
          Show label
        </div>
        {
          'undefined' !== typeof showLabel &&
          <div className="switch__container">
            <label className="switch" htmlFor={ `${ htmlId }-settings-show-label` }>
              <input
                id={ `${ htmlId }-settings-show-label` }
                type="checkbox"
                checked={ showLabel }
                onChange={ onChange(id, 'showLabel') }
              />
              <div className="slider round"/>
            </label>
          </div>
        }
      </div>
      <div className="component-settings__row">
        <input
          type="text"
          className="input-default input-default_dark"
          value={ label }
          onChange={ onChange(id, 'label') }
        />
        <div className="component-settings__description">
          Field label is a explanatory title for the content you expect your users to enter.
        </div>
      </div>
    </div>
  )
}