import { jsx, jsxs } from "react/jsx-runtime";
import { Column } from "../../../layouts/index.js";
import { memo, useCallback } from "react";
import { CheckboxContainer, CheckboxHelpText, CheckboxInput, CheckboxLabel, FieldError } from "../NodePropertiesPanel.styles.js";
const CheckboxField_CheckboxField = /*#__PURE__*/ memo(function({ field, value, onChange, error }) {
    const handleChange = useCallback((e)=>{
        onChange(e.target.checked);
    }, [
        onChange
    ]);
    return /*#__PURE__*/ jsxs(Column, {
        gap: 4,
        children: [
            /*#__PURE__*/ jsx(CheckboxContainer, {
                children: /*#__PURE__*/ jsxs(CheckboxLabel, {
                    children: [
                        /*#__PURE__*/ jsx(CheckboxInput, {
                            className: "nodrag",
                            type: "checkbox",
                            checked: !!value,
                            onChange: handleChange,
                            disabled: field.disabled
                        }),
                        /*#__PURE__*/ jsx("span", {
                            children: field.label
                        }),
                        field.icon && /*#__PURE__*/ jsx("span", {
                            style: {
                                marginLeft: '8px'
                            },
                            children: field.icon
                        })
                    ]
                })
            }),
            field.helpText && /*#__PURE__*/ jsx(CheckboxHelpText, {
                children: field.helpText
            }),
            error && /*#__PURE__*/ jsx(FieldError, {
                style: {
                    marginLeft: '26px'
                },
                children: error
            })
        ]
    });
});
export { CheckboxField_CheckboxField as CheckboxField };
