import React, { forwardRef } from "react";

// ใช้ forwardRef เพื่อให้ RHF สามารถส่ง ref มาที่ input ได้
const InputText = forwardRef(
    // รับ Props ที่จำเป็นสำหรับ RHF (ref, name, value, onChange, onBlur)
    // และรับ error object เพื่อแสดงข้อความ Validation
    ({ labelTitle, labelStyle, type, containerStyle, placeholder, error, ...rest }, ref) => {

        return(
            <div className={`form-control w-full ${containerStyle || ''}`}>
                <label className="label">
                    <span className={"label-text text-base-content " + (labelStyle || '')}>{labelTitle}</span>
                </label>
                <input
                    type={type || "text"}
                    ref={ref}              // รับ ref จาก RHF register
                    {...rest}              // รับ Props ที่เหลือจาก RHF register (value, onChange, name, etc.)
                    placeholder={placeholder || ""}
                    className={`input input-bordered w-full ${error ? 'input-error' : ''}`}
                />
                {/* แสดงข้อความ Error ที่ส่งมาจาก RHF errors object */}
                {error && <p className="text-error text-xs mt-1">{error.message}</p>}
            </div>
        );
    }
);

export default InputText;