AI Activity Feed

"use client";

import React from "react";
import { MessageSquare, Settings, Shield, Zap } from "lucide-react";

const activities = [
    { id: "1", type: "chat", user: "system", detail: "GPT-4o fine-tuned model deployed", time: "2m ago", icon: <Zap className="h-3 w-3" />, color: "text-amber-500 bg-amber-500/10" },
    { id: "2", type: "config", user: "admin", detail: "Updated token rate limits to 10K/min", time: "15m ago", icon: <Settings className="h-3 w-3" />, color: "text-blue-500 bg-blue-500/10" },
    { id: "3", type: "security", user: "system", detail: "Detected 42 recurring prompt injections", time: "1h ago", icon: <Shield className="h-3 w-3" />, color: "text-red-500 bg-red-500/10" },
    { id: "4", type: "chat", user: "user-482", detail: "Created new conversation 'Project Phoenix'", time: "3h ago", icon: <MessageSquare className="h-3 w-3" />, color: "text-emerald-500 bg-emerald-500/10" },
];

export default function AIActivityFeed() {
    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 shadow-sm w-full max-w-sm mx-auto overflow-hidden">
            <div className="px-4 py-3 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900">
                <h3 className="text-xs font-bold uppercase tracking-wider text-zinc-500">Live Activity</h3>
            </div>
            <div className="p-2 space-y-1">
                {activities.map((item) => (
                    <div key={item.id} className="flex gap-3 p-2.5 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors">
                        <div className={`h-7 w-7 rounded-full flex items-center justify-center shrink-0 ${item.color}`}>
                            {item.icon}
                        </div>
                        <div className="flex-1 min-w-0">
                            <div className="flex items-center justify-between gap-2 mb-0.5">
                                <span className="text-[11px] font-bold text-zinc-900 dark:text-zinc-100">{item.user}</span>
                                <span className="text-[10px] text-zinc-400">{item.time}</span>
                            </div>
                            <p className="text-xs text-zinc-600 dark:text-zinc-400 truncate">{item.detail}</p>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}