"use client"

import { MessageSquareMore } from 'lucide-react'

export type Interaction = { id: string; type: string; time: string; note?: string }

export default function InteractionsList({ items }: { items: Interaction[] }) {
  if (!items?.length) return <div className="text-sm text-muted-foreground">暂无互动记录</div>
  return (
    <ul className="divide-y">
      {items.map((i) => (
        <li key={i.id} className="py-2 flex items-start gap-3">
          <div className="mt-0.5">
            <MessageSquareMore className="h-4 w-4 text-slate-500" />
          </div>
          <div className="min-w-0">
            <div className="text-sm font-medium">{i.type}</div>
            {!!i.note && <div className="text-sm text-slate-600">{i.note}</div>}
            <div className="text-xs text-muted-foreground">
              {new Date(i.time).toLocaleString("zh-CN")}
            </div>
          </div>
        </li>
      ))}
    </ul>
  )
}