Viewing File: /home/maglabs/marco/wp-content/plugins/extendify/src/Chat/ChatSettings.jsx

import { Spinner, ToggleControl } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { updateOptions } from '@chat/api/Data';

export const ChatSettings = ({ showChat, setShowChat }) => {
	const [loading, setLoading] = useState(false);

	const toggleChat = () => {
		setLoading(true);
		updateOptions({ showChat: !showChat }).then(() => {
			setShowChat(!showChat);
			setLoading(false);
		});
	};

	return (
		<div className="flex items-center my-6">
			<ToggleControl
				label={__('Enable the AI Chatbot', 'extendify-local')}
				checked={showChat}
				onChange={toggleChat}
				className="m-0 focus:ring-2 focus:ring-design-main focus:border-design-main"
			/>
			{loading && <Spinner className="mt-0 text-design-main" />}
		</div>
	);
};