import { jsxs, jsx } from 'react/jsx-runtime';
import Typography from '../Typography/Typography.js';
import classNames from '../../_virtual/index.js';

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 { AiToggle as default };
//# sourceMappingURL=AiToggle.js.map
