import Select from '../select/Select'

function WidgetDropdown({
    id    = '',
    label = 'Setting label',
    text  = 'A long text can be go here.',
    isPro = false,
    data = [],
    onChange = () => {},
    disabled = false
}) {
  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} {isPro && <span>Pro</span>}</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-select strb-settings-option-select strb-common-select">
                    <Select data={data} onChange={onChange} disabled={disabled} id={id}/>
                </div>
            </div>
        </div>
        </div>
    </div>
  )
}

export default WidgetDropdown