'use client';

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

type Props = {
    htmlFor: string;
    labelText?: React.ReactNode;
    value?: string;
    valid?: boolean
    inputClassName?: string;
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id">;


const InputField = React.forwardRef<HTMLInputElement, Props>(
    ({ onChange, htmlFor, labelText, children, valid = true, className, inputClassName, ...inputProps }, ref) => {
        return (
            <div
                spellCheck={false}
                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 text-[12px] text-foreground bg-container'
                    htmlFor={htmlFor}>
                    {labelText}
                </label>

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

InputField.displayName = 'InputField'

export default InputField