import React from 'react';
import styles from '../../chatbot/components/ChatbotSettings.module.css';

interface SettingsIntegrationsProps {
    onConnectWhatsApp: () => void;
}

export function SettingsIntegrations({ onConnectWhatsApp }: SettingsIntegrationsProps) {
    return (
        <div className={styles.settingsLayout}>
            <div className={styles.appearanceCard}>
                <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '24px' }}>
                    <div style={{ background: '#25d366', width: '50px', height: '50px', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: '24px' }}>
                        💬
                    </div>
                </div>
                <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '8px', textAlign: 'center' }}>WhatsApp</h3>
                <p style={{ fontSize: '13px', color: '#6b7280', marginBottom: '24px', lineHeight: 1.5, textAlign: 'center' }}>
                    Connect WhatsApp account to read, manage and respond to all WhatsApp messages in Qixs.
                </p>
                <button
                    className={styles.syncBtn}
                    style={{ width: '100%', background: '#7c3aed' }}
                    onClick={onConnectWhatsApp}
                >
                    Connect
                </button>
            </div>
        </div>
    );
}