import React from 'react';
import { FiPlus, FiEdit2, FiMoreVertical } from 'react-icons/fi';
import styles from '../../chatbot/components/ChatbotSettings.module.css';

interface SettingsTranslationsProps {
    onEdit: (lang: string) => void;
}

export function SettingsTranslations({ onEdit }: SettingsTranslationsProps) {
    return (
        <div className={styles.settingsLayout}>
            <div className={styles.appearanceCard}>
                <div className={styles.settingsFlexHeader}>
                    <div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '8px', flexWrap: 'wrap' }}>
                            <h3 style={{ fontSize: '16px', fontWeight: 600 }}>Translation</h3>
                            <span style={{ background: '#f5f3ff', color: '#7c3aed', padding: '2px 10px', borderRadius: '20px', fontSize: '12px', fontWeight: 600 }}>Language usage: 1 / 1</span>
                        </div>
                        <p style={{ fontSize: '13px', color: '#6b7280' }}>Translate content into your customers' languages</p>
                    </div>
                    <button className={styles.syncBtn} style={{ background: '#f3f4f6', color: '#9ca3af', cursor: 'not-allowed', display: 'flex', alignItems: 'center', gap: '8px' }}>
                        <FiPlus /> Add language
                    </button>
                </div>
            </div>

            <div className={styles.appearanceCard}>
                <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '24px' }}>Published languages</h3>
                <div className={styles.tableWrapper}>
                    <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: '600px' }}>
                        <thead>
                            <tr style={{ textAlign: 'left', borderBottom: '1px solid #f3f4f6' }}>
                                <th style={{ padding: '16px', fontSize: '14px', fontWeight: 600, color: '#374151' }}>Language</th>
                                <th style={{ padding: '16px', fontSize: '14px', fontWeight: 600, color: '#374151' }}>Updated at</th>
                                <th style={{ padding: '16px', fontSize: '14px', fontWeight: 600, color: '#374151', textAlign: 'right' }}>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style={{ borderBottom: 'none' }}>
                                <td style={{ padding: '16px' }}>
                                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                                        <span style={{ fontSize: '14px', color: '#374151' }}>English</span>
                                        <span style={{ background: '#f5f3ff', color: '#7c3aed', padding: '2px 8px', borderRadius: '4px', fontSize: '11px', fontWeight: 600 }}>Default</span>
                                    </div>
                                </td>
                                <td style={{ padding: '16px', fontSize: '14px', color: '#4b5563' }}>13/01/2025 11:11 AM</td>
                                <td style={{ padding: '16px', textAlign: 'right' }}>
                                    <div style={{ display: 'flex', gap: '16px', justifyContent: 'flex-end' }}>
                                        <FiEdit2
                                            size={16}
                                            color="#6b7280"
                                            style={{ cursor: 'pointer' }}
                                            onClick={() => onEdit('English')}
                                        />
                                        <FiMoreVertical size={16} color="#6b7280" style={{ cursor: 'pointer' }} />
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
}