formipay/src/admin/components/notifications/NotificationLog.js

/**
 * Notification Log - View notification history
 */

import { __ } from '@wordpress/i18n';
import { Icon, bell, mail, message } from '@wordpress/icons';
import './NotificationLog.css';

export default function NotificationLog() {
    const logs = [
        // Mock data for now
        {
            id: 1,
            type: 'email',
            recipient: 'customer@example.com',
            subject: 'Order Confirmation',
            status: 'sent',
            date: new Date().toISOString(),
        },
    ];

    const getIcon = (type) => {
        switch (type) {
            case 'email':
                return mail;
            case 'sms':
            case 'whatsapp':
                return message;
            default:
                return bell;
        }
    };

    return (
        <div className="formipay-notification-log">
            <h3>
                <Icon icon={bell} size={18} />
                { __('Notification Log', 'formipay') }
            </h3>

            {logs.length === 0 ? (
                <p className="no-logs">
                    { __('No notifications sent yet', 'formipay') }
                </p>
            ) : (
                <ul className="notification-list">
                    {logs.map((log) => (
                        <li key={log.id} className={`notification-item ${log.status}`}>
                            <div className="notification-icon">
                                <Icon icon={getIcon(log.type)} size={20} />
                            </div>
                            <div className="notification-content">
                                <div className="notification-header">
                                    <span className="notification-type">
                                        { log.type.toUpperCase() }
                                    </span>
                                    <span className="notification-status">
                                        { log.status }
                                    </span>
                                </div>
                                <div className="notification-details">
                                    <strong>{ log.subject || log.type }</strong>
                                    <span className="notification-recipient">
                                        { __('To:', 'formipay') } { log.recipient }
                                    </span>
                                </div>
                                <div className="notification-date">
                                    { new Date(log.date).toLocaleString() }
                                </div>
                            </div>
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
}