import React from 'react'
import HintSVG from './images/hint.svg?react'

export default function Hint ({ htmlId, id, showHint, hint, onChange }) {
  return (
    /* HINT SETTINGS */
    <div className="component-settings__section">
      <div className="component-settings__row-flex">
        <div className="component-settings__title">
          <HintSVG/>
          Show hint
        </div>
        <div className="switch__container">
          <label className="switch" htmlFor={ `${ htmlId }-settings-show-hint` }>
            <input
              id={ `${ htmlId }-settings-show-hint` }
              type="checkbox"
              checked={ showHint }
              onChange={ onChange(id, 'showHint') }
            />
            <div className="slider round"/>
          </label>
        </div>
      </div>
      <div className="component-settings__row">
        <input
          type="text"
          className="input-default input-default_dark"
          value={ hint }
          onChange={ onChange(id, 'hint') }
        />
        <div className="component-settings__description">
          Enter hint text below the input.
        </div>
      </div>
    </div>
  )
}