import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "@uipath/apollo-wind";
import { memo, useCallback } from "react";
const CheckboxField_CheckboxField = /*#__PURE__*/ memo(function({ field, value, onChange, error }) {
    const handleChange = useCallback((e)=>{
        onChange(e.target.checked);
    }, [
        onChange
    ]);
    return /*#__PURE__*/ jsxs("div", {
        className: "flex flex-col gap-1",
        children: [
            /*#__PURE__*/ jsx("div", {
                className: cn('py-2 rounded transition', field.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-(--canvas-background-hover)'),
                children: /*#__PURE__*/ jsxs("label", {
                    className: cn('flex items-center text-[13px] text-(--canvas-foreground) select-none', field.disabled ? 'cursor-not-allowed' : 'cursor-pointer'),
                    children: [
                        /*#__PURE__*/ jsx("input", {
                            className: "nodrag size-[18px] mr-2 cursor-pointer disabled:cursor-not-allowed accent-(--canvas-primary)",
                            type: "checkbox",
                            checked: !!value,
                            onChange: handleChange,
                            disabled: field.disabled
                        }),
                        /*#__PURE__*/ jsx("span", {
                            children: field.label
                        }),
                        field.icon && /*#__PURE__*/ jsx("span", {
                            className: "ml-2",
                            children: field.icon
                        })
                    ]
                })
            }),
            field.helpText && /*#__PURE__*/ jsx("span", {
                className: "text-[12px] text-(--canvas-foreground-de-emp) block ml-[26px]",
                children: field.helpText
            }),
            error && /*#__PURE__*/ jsx("span", {
                className: "text-[12px] text-(--canvas-error-text) block ml-[26px]",
                children: error
            })
        ]
    });
});
export { CheckboxField_CheckboxField as CheckboxField };
