import React, { forwardRef } from "react";
import PropTypes from "prop-types";

// 1. สร้าง Functional Component ปกติ (ไม่ใช้ forwardRef โดยตรง)
function SelectInputBase({ labelTitle, options, containerStyle, error, ...rest }, ref) {
    return (
        <div className={`form-control w-full ${containerStyle || ""}`}>
            <label className="label">
                <span className="label-text text-base-content">{labelTitle}</span>
            </label>

            <select
                ref={ref}
                {...rest}
                className={`select select-bordered w-full ${error ? "select-error" : ""}`}
            >
                <option value="" disabled>
                    --- กรุณาเลือก ---
                </option>
                {options.map((option) => (
                    <option key={option.value} value={option.value}>
                        {option.name}
                    </option>
                ))}
            </select>

            {error && <p className="text-error text-xs mt-1">{error.message}</p>}
        </div>
    );
}

// 2. กำหนด propTypes ปกติ (จะไม่มี warning อีก)
SelectInputBase.propTypes = {
    labelTitle: PropTypes.string.isRequired,
    options: PropTypes.arrayOf(
        PropTypes.shape({
            value: PropTypes.string.isRequired,
            name: PropTypes.string.isRequired,
        })
    ).isRequired,
    containerStyle: PropTypes.string,
    error: PropTypes.object,
};

// 3. ใช้ forwardRef กับตัวหลัก
const SelectInput = forwardRef(SelectInputBase);

export default SelectInput;
