import type { MemorySegment } from '../../types/protocol'
import CollapsiblePanel from '../CollapsiblePanel'
import { Brain } from 'lucide-react'

export default function MemoryView({ segment }: { segment: MemorySegment }) {
  return (
    <CollapsiblePanel
      title="User Memory"
      icon={<Brain size={16} />}
      color="border-purple-400 text-purple-700"
      bgColor="bg-purple-50"
      defaultCollapsed={segment.collapsed}
      badge={`${segment.items.length} 条记忆`}
    >
      <ul className="space-y-2">
        {segment.items.map((item, i) => (
          <li key={i} className="bg-white/60 rounded px-2 py-1.5">
            <div className="text-xs font-semibold text-purple-800">{item.title}</div>
            <div className="text-xs text-gray-500 mt-0.5">{item.content}</div>
          </li>
        ))}
      </ul>
    </CollapsiblePanel>
  )
}