import { InputHTMLAttributes, forwardRef } from 'react';
import { cn } from '@/lib/cn';

interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
  error?: boolean;
}

export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
  ({ name, error, className, disabled, ...props }, ref) => {
    return (
      <div className="mb-4 grow">
        <div className="relative">
          <input
            id={name}
            name={name}
            ref={ref}
            disabled={disabled}
            aria-invalid={error || undefined}
            aria-disabled={disabled}
            className={cn(
              'text-text-primary block w-full border p-2 pr-10 text-sm',
              error
                ? 'border-red-600 bg-red-200'
                : 'focus:border-text-primary focus:ring-text-priborder-text-primary border-gray-500 bg-white',
              className,
              disabled && 'cursor-not-allowed bg-gray-200 opacity-70',
            )}
            {...props}
          />
        </div>
      </div>
    );
  },
);

InputField.displayName = 'InputField';
export default InputField;