import React from 'react'
import Tooltip from '../utils/Tooltip';
import clsx from 'clsx';

type Props = {
    htmlFor: string;
    labelText?: React.ReactNode;
    value?: string;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    valid?: boolean
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id">;


function InputField({ onChange, htmlFor, labelText, children, valid = true, className, ...inputProps }: Props) {
    return (
        <div className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
            <label
                className='absolute start-2 -top-2.5 px-2 bg-inherit text-[12px] text-foreground'
                htmlFor={htmlFor}>
                {labelText}
            </label>

            <Tooltip content={inputProps['aria-errormessage']} hidden={!inputProps['aria-errormessage']}>
                <input
                    onChange={onChange}
                    className={clsx(
                        inputProps['aria-errormessage'] && '!text-red-300',
                        'py-2.5 pt-3.5 text-sm2 w-full outline-0 !leading-6'
                    )}
                    name={htmlFor}
                    {...inputProps} />
                {children}
            </Tooltip>
        </div>
    )
}

export default InputField