const SafiSwitch = ( {name, className, checked, onChange, label, title, ...props } ) => {

    const classes = `joli-switch ${className}`;

    return (
        <label className="inline-flex items-center gap-2" htmlFor={name}>
            <div className="joli-switch" title={title}>
                <input
                    type="checkbox"
                    name={name}
                    className={classes}
                    checked={checked}
                    onChange={e => onChange(e.target.checked)}
                    {...props}
                />
                <span className="slider round"></span>
            </div>
            {label}
        </label>
    );
}

export default SafiSwitch;