import { forwardRef, useId } from "react";
import "./Input.css";

export const Input = forwardRef(function Input(
    { label, error, hint, icon = null, id, className = "", ...props },
    ref
) {
    const generatedId = useId();
    const inputId = id || generatedId;

    return (
        <div className={`dw-field ${className}`}>
            {label && (
                <label htmlFor={inputId} className="dw-field__label">
                    {label}
                </label>
            )}
            <div className={`dw-field__control ${error ? "dw-field__control--error" : ""}`}>
                {icon && <span className="dw-field__icon">{icon}</span>}
                <input ref={ref} id={inputId} {...props} />
            </div>
            {error ? (
                <span className="dw-field__message dw-field__message--error">{error}</span>
            ) : hint ? (
                <span className="dw-field__message">{hint}</span>
            ) : null}
        </div>
    );
});