import React from 'react';
import { FiMail } from 'react-icons/fi';
import styles from '../../chatbot/components/ChatbotSettings.module.css';

interface SettingsChannelsProps {
    onConnectEmail: () => void;
}

export function SettingsChannels({ onConnectEmail }: SettingsChannelsProps) {
    return (
        <div className={styles.settingsLayout}>
            <div className={styles.appearanceCard}>
                <div style={{ background: '#fef3c7', width: '50px', height: '40px', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '24px' }}>
                    <FiMail size={24} color="#f59e0b" />
                </div>
                <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '8px' }}>Connect Email</h3>
                <p style={{ fontSize: '13px', color: '#6b7280', marginBottom: '24px', lineHeight: 1.5 }}>
                    Receive and reply to customers' emails directly in Qixs inbox.
                </p>
                <button
                    className={styles.syncBtn}
                    style={{ width: '100%', background: 'white', color: '#7c3aed', border: '1px solid #7c3aed' }}
                    onClick={onConnectEmail}
                >
                    Connect
                </button>
            </div>
        </div>
    );
}