"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PlusButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const react_utils_1 = require("../../../../../../../react-utils/index.js");
const PlusButton = function YfmTablePlusButton({ qa, onClick, onHoverChange, }) {
    const [hovered, setHovered, unsetHovered] = (0, react_utils_1.useBooleanState)(false);
    (0, react_1.useEffect)(() => {
        onHoverChange(hovered);
    }, [hovered, onHoverChange]);
    return ((0, jsx_runtime_1.jsx)(uikit_1.Flex, { centerContent: true, width: 20, height: 20, onMouseEnter: setHovered, onMouseLeave: unsetHovered, style: {
            borderRadius: '100px', // button circle border radius
            backgroundColor: hovered ? 'var(--g-color-base-background)' : undefined,
        }, children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { qa: qa, size: "xs", pin: "circle-circle", view: hovered ? 'outlined-action' : 'normal', onClick: onClick, style: hovered
                ? {
                    '--g-button-background-color-hover': 'var(--g-color-base-background)',
                }
                : {
                    color: 'transparent',
                    '--g-button-height': '4px',
                    '--g-button-background-color': 'var(--g-color-line-generic-accent)',
                    '--g-button-border-color': 'var(--g-color-line-generic-accent)',
                }, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Plus }) }) }));
};
exports.PlusButton = PlusButton;
//# sourceMappingURL=PlusButton.js.map
