const DefaultIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="2" y="7" width="20" height="10" rx="5" /><circle cx="9" cy="12" r="3" fill="currentColor" stroke="none" />
  </svg>
);

function Switch({
  id = 'offcanvas',
  title = 'Enable / Disable',
  text = 'You can enable / disable sales notification from here.',
  defaultValue = false,
  onChange = () => {},
  icon = <DefaultIcon />,
  hint = ''
}) {
  return (
    <div className="strb-offcanvas-option-item strb-d-flex strb-align-items-center strb-justify-content-between strb-flex-wrap">
        {icon && <span className="strb-oc-ico">{icon}</span>}
        <div className="strb-offcanvas-option-content">
            <h4 className="strb-offcanvas-option-title font-semibold">{title}</h4>
            <p>{text}</p>
        </div>
        <div className="strb-offcanvas-option-action">
        <div className="strb-toggle-switch-2">
            <label htmlFor={id}>
                { (defaultValue === true)? <input type="checkbox" className="switch-input" id={id} onChange={onChange} name={id} checked/> :
                  <input type="checkbox" className="switch-input" id={id} onChange={onChange} name={id}/>
                }
                <span className="strb-toggle-switch-2-text on">on</span>
                <span className="strb-toggle-switch-2-text off">off</span>
                <span className="strb-toggle-switch-2-bg" />
                <span className="strb-toggle-switch-2-handle" />
            </label>
        </div>
        {hint && <span className="strb-oc-hint">{hint}</span>}
        </div>
    </div>
  )
}

export default Switch