import React from 'react'
import PlaceholderSVG from './images/placeholder.svg?react'

export default function Placeholder ({ htmlId, id, placeholder, showPlaceholder, onChange }) {
  return (
    /* PLACEHOLDER SETTINGS */
    <div className="component-settings__section">
      <div className="component-settings__row-flex">
        <div className="component-settings__title">
          <PlaceholderSVG/>
          Placeholder
        </div>
        {
          'undefined' !== typeof showPlaceholder &&
          <div className="switch__container">
            <label className="switch" htmlFor={ `${ htmlId }-settings-enable-placeholder` }>
              <input
                id={ `${ htmlId }-settings-enable-placeholder` }
                type="checkbox"
                checked={ showPlaceholder }
                onChange={ onChange(id, 'showPlaceholder') }
              />
              <div className="slider round"/>
            </label>
          </div>
        }
      </div>
      <div className="component-settings__row">
        <input
          type="text"
          className="input-default input-default_dark"
          value={ placeholder }
          onChange={ onChange(id, 'placeholder') }
        />
        <div className="component-settings__description">
          Usually, a placeholder is a sample of what kind of input you expect.
        </div>
      </div>
    </div>
  )
}