"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useId } from "react";
import { cn } from "../../../utils/cn";
export const Input = ({ label, error, helperText, required = false, className, id, testId, ...props }) => {
    const generatedId = useId();
    const inputId = id || generatedId;
    const hasError = !!error;
    const { children: _unused, ...inputProps } = props;
    return (_jsxs("div", { className: "w-full", children: [label && (_jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2", "data-testid": testId ? `${testId}.label` : undefined, children: [label, required && (_jsx("span", { className: "text-error-500 ml-1", "aria-label": "required", children: "*" }))] })), _jsx("input", { id: inputId, className: cn("w-full px-4 py-2 border-2 rounded-lg", "bg-white dark:bg-neutral-700", "text-neutral-900 dark:text-white", "placeholder-neutral-400 dark:placeholder-neutral-500", "focus:ring-2 focus:ring-primary-500 focus:border-transparent", "transition-all", "aria-invalid:border-error-500", hasError
                    ? "border-error-500 dark:border-error-500"
                    : "border-neutral-300 dark:border-neutral-600", className), "aria-invalid": hasError, "aria-describedby": hasError
                    ? `${inputId}-error`
                    : helperText
                        ? `${inputId}-helper`
                        : undefined, required: required, "data-testid": testId, ...inputProps }), error && (_jsx("p", { id: `${inputId}-error`, className: "mt-1 text-sm text-error-600 dark:text-error-400", role: "alert", children: error })), helperText && !error && (_jsx("p", { id: `${inputId}-helper`, className: "mt-1 text-sm text-neutral-500 dark:text-neutral-400", children: helperText }))] }));
};
export default Input;
