import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import './AiToggle.scss';
import Typography from '../Typography';
import classNames from 'classnames';
const AiToggle = ({ onChange, disabled, checked = false, id = 'toggle', path, }) => {
    const handleChange = (e) => {
        if (onChange) {
            onChange(e);
        }
    };
    return (_jsxs("div", { className: "ff--ai-switch-container", children: [_jsx("input", { className: "ff--ai-switch-checkbox", id: `ff-toggle-${id}`, type: "checkbox", disabled: !!disabled, onChange: handleChange, checked: checked }), _jsx("label", { className: classNames(`ff--ai-switch-label`, {
                    'ff--ai-switch-label--disabled': disabled,
                }), htmlFor: `ff-toggle-${id}`, children: _jsx("span", { className: "ff--ai-switch-content", children: _jsxs("span", { className: "ff--ai-switch-content", children: [_jsx(Typography, { className: classNames('ff--ai-switch-typography', {
                                    left: checked,
                                    right: !checked,
                                }), as: "div", fontWeight: "bold", fontSize: 18, color: checked
                                    ? 'var(--base-bg-color)'
                                    : 'var(--ff-ai-toggle-text-color)', children: "AI" }), _jsx("img", { className: "ff--ai-switch-image", src: path, alt: "AI image" })] }) }) })] }));
};
export default AiToggle;
//# sourceMappingURL=AiToggle.js.map