import React, { forwardRef } from "react";

interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  error?: string;
  multiline?: boolean;
}

export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
  ({ label, error, className = "", multiline, ...props }, ref) => {
    const Component = multiline ? 'textarea' : 'input';
    
    return (
      <div className={`${className} relative`}>
        <label className="block text-sm font-semibold text-gray-700 mb-2">
          {label}
          {props.required && <span className="text-red-500 ml-1">*</span>}
        </label>
        <Component
          ref={ref}
          className={`
            w-full px-4 py-3 rounded-lg
            border border-gray-300
            bg-white text-gray-900
            transition duration-150 ease-in-out
            placeholder-gray-400
            focus:ring-2 focus:ring-blue-500 focus:border-transparent
            hover:border-gray-400
            ${error ? "border-red-300 focus:ring-red-500" : ""}
          `}
          {...props}
        />
        {error && (
          <div className="absolute -bottom-5 left-0">
            <p className="text-xs text-red-500">{error}</p>
          </div>
        )}
      </div>
    );
  }
);

FormInput.displayName = "FormInput";