import { Card } from './Card'

export interface ActivityItem {
  action: string
  actor_name: string
  created_at: string
}

interface ActivityTimelineProps {
  items: ActivityItem[]
}

export function ActivityTimeline({ items }: ActivityTimelineProps) {
  return (
    <Card title="Recent activity">
      {items.length === 0 ? (
        <p className="text-secondary mb-0">No activity yet.</p>
      ) : (
        <ul className="list-group list-group-flush">
          {items.map((item, i) => (
            <li key={i} className="list-group-item px-0">
              <i className="bi bi-dot text-primary fs-4 align-middle"></i>
              <span className="fw-semibold">{item.actor_name}</span> — {item.action.replace('.', ' ')}
              <div className="text-secondary fs-7">{new Date(item.created_at).toLocaleString()}</div>
            </li>
          ))}
        </ul>
      )}
    </Card>
  )
}