const DefaultIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="3.5" fill="currentColor" stroke="none" />
  </svg>
);

function Radio({
    title = 'Radio',
    text = 'Select Content Type',
    input1 = {
        _name: 'radio',
        _value: 'radio 1',
        _label: 'Radio 1',
    },
    input2 = {
        _name: 'radio',
        _value: 'radio 2',
        _label: 'Radio 2',
    },
    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">{title}</h4>
            <p>{text}</p>
        </div>
        <div className="strb-offcanvas-option-action">
        <div className="strb-offcanvas-radio-wrapper strb-d-flex strb-align-items-center">
            <div className="strb-radio-toggle">
            <label htmlFor={input1._name}>
                <input 
                    type="checkbox" 
                    id={input1._name} 
                    name={input1._name} 
                    value={input1._value}
                    onChange={onChange}
                />
                <span className="strb-radio-handle">{input1._label}</span>
            </label>
            </div>
            <div className="strb-radio-toggle">
            <label htmlFor={input2._name + "On"}>
                <input 
                    type="checkbox" 
                    id={input2._name+"On"} 
                    name={input2._name}
                    value={input2._value}
                    onChange={onChange}
                />
                <span className="strb-radio-handle">{input2._label}</span>
            </label>
            </div>
        </div>
        {hint && <span className="strb-oc-hint">{hint}</span>}
        </div>
    </div>
  )
}

export default Radio