import React from 'react';
const TENSION_ICONS = {
CONTRADICTION: '⚠️',
OUTDATED: '🕐',
DUPLICATE: '📋',
CONFLICT: '💥'
};
function TensionsList({ tensions }) {
if (tensions.length === 0) {
return (
<div className="tensions-list">
<div style={{ textAlign: 'center', padding: '40px', color: 'var(--text-muted)' }}>
<div style={{ fontSize: '32px', marginBottom: '12px' }}>✅</div>
<div>No active tensions</div>
<div style={{ fontSize: '12px' }}>Your memory is consistent</div>
</div>
</div>
);
}
const formatTime = (timestamp) => {
const date = new Date(timestamp);
const now = new Date();
const diffMs = now - date;
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
if (diffHours < 1) return 'Just now';
if (diffHours < 24) return `${diffHours}h ago`;
return `${Math.floor(diffHours / 24)}d ago`;
};
return (
<div className="tensions-list">
<div style={{ marginBottom: '16px', color: 'var(--text-secondary)', fontSize: '12px' }}>
Tensions are detected contradictions, outdated info, or duplicates in your memory.
Resolve them to maintain memory consistency.
</div>
{tensions.map(tension => (
<div key={tension.id} className="tension-item">
<div className="tension-icon">
{TENSION_ICONS[tension.type] || '❓'}
</div>
<div className="tension-content">
<div className={`tension-type ${tension.type.toLowerCase()}`}>
{tension.type}
</div>
<div className="tension-description">
{tension.description}
</div>
<div className="tension-time">
{formatTime(tension.created)}
</div>
</div>
<button className="tension-action">
Resolve
</button>
</div>
))}
</div>
);
}
export default TensionsList;
