function WidgetInput({
    id    = '', 
    label = 'Setting label',
    text  = 'A long can be go here.',
    defaultValue = '',
    type = 'text',
    onChange = () => {}
}) {
  return (
    <div className="strb-woo-option-item">
        <div className="strb-row">
        <div className="strb-col-xl-7 strb-col-lg-6">
            <div className="strb-woo-option-content">
                <h4 className="strb-woo-option-title">{label}</h4>
                <p>{text}</p>
            </div>
        </div>
        <div className="strb-col-xl-5 strb-col-lg-6">
            <div className="strb-woo-option-action">
            <div className="strb-woo-option-input">
                <input type={type} defaultValue={defaultValue} onChange={onChange} name={id} min={1} max={20}/>
            </div>
            </div>
        </div>
        </div>
    </div>
  )
}

export default WidgetInput