import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, } from 'react';
import { useTranslation } from 'react-i18next';
import { Checkbox, Typography } from 'antd';
import { SettingsFieldStyled, SettingsLabelCSS, } from './grid.style';
export const ShowGridField = ({ value, onChange, }) => {
    const { t } = useTranslation();
    const handleChange = useCallback((event) => {
        onChange(event.target.checked);
    }, [onChange]);
    return (_jsxs(SettingsFieldStyled, { children: [_jsx(Typography.Text, { css: SettingsLabelCSS, children: t('settings.grid.modal.field.showGrid.label') }), _jsx(Checkbox, { checked: value, onChange: handleChange })] }));
};
