import { h } from 'preact'

function TextBox({ id, type = 'text', label, disabled, formdata, formchange, maxlength, overridevalue }) {
    let onChange = (e) => formchange({ ...formdata, [e.target.id]: e.target.value });
    return (<div className={'textbox'} >
        <input placeholder=" " disabled={disabled} type={type} value={overridevalue?overridevalue:formdata[id]?formdata[id]:''} id={id} onInput={onChange} maxlength={maxlength} name={`form-${id}`} />
        <label for={id}>{label}</label>
    </div>)
}
function CheckBox({ id, disabled, label, formdata, formchange }) {
    let onChange = (e) => formchange({ ...formdata, [e.target.id]: e.target.checked  });
    return (<div className={'checkbox'} >
        <input disabled={disabled} type={'checkbox'} checked={formdata[id] ? 'on' : ''} id={id} onChange={onChange} name={`from-${id}`} />
        <label for={id}>{label}</label>
    </div>)
}
function Button({ onClick, children, type }) {
    return (<div className={'button'} onClick={onClick} >
        <button type={type} >{children}</button>
    </div>)
}
export { TextBox, CheckBox, Button }