/home/edulekha/heavenbuildpro.com/wp-content/plugins/extendify/src/Chat/ChatSettings.js
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 mt-4">
            <ToggleControl
                label={__('Enable the AI Chatbot', 'extendify')}
                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>
    )
}