function TabHead({ 
    title = 'Heading', 
    text = 'Some text will go here', 
    onSave = (e) => {e.preventDefault()}, 
    onToggle = (e) => {e.preventDefault()}, 
    toggle = false,
    toggleActive = false }) {

    return (
        <div className="strb-controls-wrapper">
            <div className="strb-row strb-align-items-center">
            <div className="strb-col-xl-5 strb-col-lg-6">
                <div className="strb-controls-content">
                <h4 className="strb-controls-title">{title}</h4>
                <p>{text}</p>
                </div>
            </div>
            <div className="strb-col-xl-7 strb-col-lg-6">
                <div className="strb-controls-setting strb-d-md-flex strb-justify-content-lg-end">
                    { toggle && <div className={toggleActive? "active strb-toggle-switch strb-d-flex strb-align-items-center" : "strb-toggle-switch strb-d-flex strb-align-items-center"}>
                        <span>Disable All</span>
                        <label htmlFor='toggle'/>
                        <input type="checkbox" className="strb-toggle-switch-input" id='toggle' onChange={onToggle}/>
                        <span>Enable All</span>
                    </div> }
                    <div className="strb-controls-save ">
                        <a href="javascript:void(0)" className="strb-btn-fill" onClick={onSave}>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z"/><path d="M17 21v-8H7v8M7 3v5h8"/></svg>
                            Save Settings
                        </a>
                    </div>
                </div>
            </div>
            </div>
        </div>
    )
}

export default TabHead