import React from 'react';
function RecentMemories({ memories, expanded = false }) {
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 date.toLocaleDateString('fr-FR', { month: 'short', day: 'numeric' });
};
if (memories.length === 0) {
return (
<div className="memories-list">
<div style={{ textAlign: 'center', padding: '40px', color: 'var(--text-muted)' }}>
<div style={{ fontSize: '32px', marginBottom: '12px' }}>🔍</div>
<div>No memories found</div>
<div style={{ fontSize: '12px' }}>Try a different search query</div>
</div>
</div>
);
}
return (
<div className="memories-list">
{memories.map(memory => (
<div key={memory.id} className="memory-item">
<span className="memory-layer-badge">{memory.layer}</span>
<div style={{ flex: 1 }}>
<div className="memory-content">
{memory.content}
</div>
<div className="memory-meta">
<span className="memory-time">{formatTime(memory.timestamp)}</span>
{memory.score && (
<span className="memory-score">
Score: {(memory.score * 100).toFixed(0)}%
</span>
)}
</div>
</div>
</div>
))}
{!expanded && memories.length >= 3 && (
<div style={{ textAlign: 'center', marginTop: '8px' }}>
<button style={{
background: 'transparent',
border: '1px solid var(--border-color)',
color: 'var(--text-secondary)',
padding: '6px 12px',
borderRadius: '4px',
fontSize: '12px',
cursor: 'pointer'
}}>
View all memories →
</button>
</div>
)}
</div>
);
}
export default RecentMemories;
