import { forwardRef, InputHTMLAttributes, useEffect, useImperativeHandle, useRef } from 'react';

export default forwardRef(function FormInput(
    { type = 'text', className = '', isFocused = false, ...props }: InputHTMLAttributes<HTMLInputElement> & { isFocused?: boolean },
    ref,
) {
    const localRef = useRef<HTMLInputElement>(null);

    useImperativeHandle(ref, () => ({
        focus: () => localRef.current?.focus(),
    }));

    useEffect(() => {
        if (isFocused) {
            localRef.current?.focus();
        }
    }, [isFocused]);

    return (
        <input
            {...props}
            type={type}
            className={`w-full rounded border border-outline-variant px-3 py-2.5 text-sm text-on-surface placeholder:text-on-surface-variant/60 focus:border-jgcp-navy focus:outline-none focus:ring-1 focus:ring-jgcp-navy ${className}`}
            ref={localRef}
        />
    );
});