const { useState, useEffect, useCallback, useRef } = React;

function StatusBadge({ status }) {
    const MAP = {
        active:      'Aktif',
        ended:       'Bitti',
        transferred: 'Transfer',
        missed:      'Cevapsız',
        abandoned:   'Yarıda Kesildi',
        bekliyor:    'Bekliyor',
        failed:      'Başarısız',
    };
    const label = MAP[status] || status || '—';
    return <span className={`badge ${status || 'unknown'}`}>{label}</span>;
}

function DeptBadge({ dept }) {
    const label = window.DEPT_LABELS?.[dept] || dept;
    return <span className={`badge ${dept}`}>{label}</span>;
}

function Toasts({ toasts }) {
    return (
        <div className="toast-container">
            {toasts.map(t => (
                <div key={t.id} className={`toast toast-${t.type || 'info'}`}>
                    <span>{t.msg}</span>
                </div>
            ))}
        </div>
    );
}

// Global scope assignments
window.StatusBadge = StatusBadge;
window.DeptBadge = DeptBadge;
window.Toasts = Toasts;