"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useId } from "react";
import { cn } from "../../../utils/cn";
export const Select = ({ label, error, helperText, required = false, className, id, options, testId, ...props }) => {
    const generatedId = useId();
    const selectId = id || generatedId;
    const hasError = !!error;
    return (_jsxs("div", { className: "w-full", children: [label && (_jsxs("label", { htmlFor: selectId, 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("select", { id: selectId, className: cn("w-full px-4 py-2 border-2 rounded-lg", "bg-white dark:bg-neutral-700", "text-neutral-900 dark:text-white", "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
                    ? `${selectId}-error`
                    : helperText
                        ? `${selectId}-helper`
                        : undefined, required: required, "data-testid": testId, ...props, children: options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), error && (_jsx("p", { id: `${selectId}-error`, className: "mt-1 text-sm text-error-600 dark:text-error-400", role: "alert", children: error })), helperText && !error && (_jsx("p", { id: `${selectId}-helper`, className: "mt-1 text-sm text-neutral-500 dark:text-neutral-400", children: helperText }))] }));
};
export default Select;
