export function MaterialInput(props: {
    resourceName: string,
    disabled: boolean,
    value: string,
    setValue: (v: string) => void,
}) {
    let inputElement: HTMLInputElement | undefined;

    return (
        <div class="relative my-6">
            <input
                ref={inputElement}
                id="search-dni"
                class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1 w-full
                        invalid:border-c-error invalid:text-c-error
                        focus:border-c-primary outline-none font-mono
                        disabled:opacity-50 disabled:cursor-not-allowed"
                type="text"
                placeholder={props.resourceName}
                value={props.value}
                required
                onInput={(e) => props.setValue(e.target.value)}
                disabled={props.disabled}
            />


            <label for="search-dni" class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">
                {props.resourceName}
            </label>
        </div>
    );
}
