import type { LucideIcon } from 'lucide-react'
import { GitBranch, Play, CheckCircle, FileText, Edit } from 'lucide-react'

interface ActivityItem {
  id: string
  icon: LucideIcon
  iconColor: string
  iconBg: string
  description: string
  timestamp: string
}

interface RecentActivityProps {
  activities?: ActivityItem[]
}

const DEFAULT_ACTIVITIES: ActivityItem[] = [
  { id: '1', icon: Play, iconColor: '#34d399', iconBg: 'rgba(52, 211, 153, 0.1)', description: 'Started VPN Connectivity Triage session', timestamp: '2 min ago' },
  { id: '2', icon: CheckCircle, iconColor: '#ea580c', iconBg: 'rgba(249, 115, 22, 0.1)', description: 'Completed M365 License Provisioning', timestamp: '15 min ago' },
  { id: '3', icon: Edit, iconColor: '#eab308', iconBg: 'rgba(234, 179, 8, 0.1)', description: 'Updated Printer Troubleshooting flow', timestamp: '1 hr ago' },
  { id: '4', icon: GitBranch, iconColor: '#ea580c', iconBg: 'rgba(249, 115, 22, 0.1)', description: 'Created new DNS Resolution flow', timestamp: '3 hr ago' },
  { id: '5', icon: FileText, iconColor: '#8891a0', iconBg: 'rgba(136, 145, 160, 0.1)', description: 'Exported session report #TK-4821', timestamp: 'Yesterday' },
]

export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivityProps) {
  return (
    <div className="card-flat">
      <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
        <h3 className="font-heading text-sm font-bold text-foreground">Recent Activity</h3>
      </div>
      <div>
        {activities.map((item, i) => (
          <div
            key={item.id}
            className="flex items-start gap-3 px-5 py-3 fade-in"
            style={{
              animationDelay: `${750 + i * 40}ms`,
              borderBottom: i < activities.length - 1 ? '1px solid var(--glass-border)' : undefined,
            }}
          >
            <span
              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
              style={{ background: item.iconBg }}
            >
              <item.icon size={16} style={{ color: item.iconColor }} />
            </span>
            <div className="flex-1 min-w-0 pt-0.5">
              <p className="text-sm text-foreground">{item.description}</p>
            </div>
            <span className="shrink-0 font-sans text-xs text-[0.625rem] text-muted-foreground pt-1">
              {item.timestamp}
            </span>
          </div>
        ))}
      </div>
    </div>
  )
}