'use client';
import clsx from 'clsx';
import { useEffect, useState, } from 'react';
import { generateUniqueId } from '../../../utils';
import { generateBorder } from './utils/border';
import { RenderErrorOrHelperText } from './utils/RenderErrorOrHelperText';
/**
 * Input component for rendering a labeled input field with optional icons, helper text, and error message.
 *
 * @component
 * @example
 * // Example usage of Input component
 * <Input
 *   label="Username"
 *   input={{ type: 'text', value: 'JohnDoe', onChange: () => console.log('Input changed') }}
 *   helperText="Enter your username"
 *   error="Username is required"
 *   iconL={<SomeIcon />}
 *   iconR={<AnotherIcon />}
 * />
 *
 * @param {Object} props - The properties of the Input component.
 * @param {string} props.label - The label text for the input field.
 * @param {Object} props.input - The properties for the input element.
 * @param {string} [props.helperText] - Optional helper text to be displayed below the input field.
 * @param {string} [props.error] - Optional error message to be displayed below the input field.
 * @param {ReactNode} [props.iconL] - Optional icon to be displayed to the left of the input field.
 * @param {ReactNode} [props.iconR] - Optional icon to be displayed to the right of the input field.
 *
 * @returns {ReactNode} The rendered Input component.
 */
export function Input({ label, input, helperText, error, iconL, iconR, }) {
    const [id, setId] = useState('');
    const inputClasses = clsx('peer disabled:text-gray-3 h-full w-full rounded-full bg-transparent px-5 text-sm font-normal text-black outline-0 transition-all focus:text-black', input.className);
    const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error);
    if (id) {
        input.id = id;
        labelProps.htmlFor = id;
    }
    useEffect(() => {
        setId(generateUniqueId());
    }, []);
    return (<div className="w-full max-w-full">
      <div className="relative h-9">
        <input {...input} className={inputClasses} placeholder=" "/>
        <label {...labelProps}>{label}</label>
        <fieldset className={fieldsetClasses}>
          <legend className={legendClasses}>{label}</legend>
        </fieldset>
        {!!iconL && (<span className={clsx('peer-disabled:text-gray-3 absolute top-3 left-1', error ? 'text-error' : 'text-black')}>
            {iconL}
          </span>)}
        {!!iconR && (<span className={clsx('peer-disabled:text-gray-3 absolute top-3 right-2', error ? 'text-error' : 'text-black')}>
            {iconR}
          </span>)}
      </div>
      <RenderErrorOrHelperText disabled={input.disabled} helperText={helperText} error={error} className="pl-6"/>
    </div>);
}
//# sourceMappingURL=Input.jsx.map