import React from 'react';

const AlertsManagement = () => {
    return (
        <div className="widget-container">
            <div className="widget-header">
                <h3>Alerts Configuration</h3>
            </div>
            <div className="widget-content">
                <div style={{ background: 'var(--bg-secondary)', padding: '1rem', borderRadius: '8px' }}>
                    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                        <thead>
                            <tr style={{ textAlign: 'left', color: 'var(--text-secondary)' }}>
                                <th style={{ padding: '0.5rem' }}>Trigger</th>
                                <th style={{ padding: '0.5rem' }}>Recipients</th>
                                <th style={{ padding: '0.5rem' }}>Active</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
                                <td style={{ padding: '0.5rem' }}>Work Order Assign</td>
                                <td style={{ padding: '0.5rem' }}>Assignee</td>
                                <td style={{ padding: '0.5rem' }}><input type="checkbox" checked readOnly /></td>
                            </tr>
                            <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
                                <td style={{ padding: '0.5rem' }}>Low Stock Warning</td>
                                <td style={{ padding: '0.5rem' }}>Store Manager</td>
                                <td style={{ padding: '0.5rem' }}><input type="checkbox" checked readOnly /></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};

export default AlertsManagement;
