import useAdmui from "./useAdmui";
import AdmuiAsterisk from "./AdmuiAsterisk";

function AdmuiWrapper(p) {
    const { control, field, isInvalid, isValid, isDirty } = useAdmui({ name: p.name, required: p.required });
    return <>
        <div className={`
            aui-control-container 
            ${p.x ? 'aui-control-container-x' : 'aui-control-container-y'} 
            ${isInvalid ? 'aui-control-container-invalid' : ''}
            ${p.search && 'aui-control-container-search'}
            `}
            style={{ '--aui-control-container-x': `${p.x}px` }}
        >
            <div className="aui-control-label-container">
                <label className="aui-control-label" htmlFor={p._id}>{p.label} </label> {p.required ? <AdmuiAsterisk isInvalid={!isDirty || isInvalid} /> : ''}
            </div>

            {p.children}

        </div >
    </>

}
export default AdmuiWrapper