import React from 'react';

export default function LogAnalytics() {
  const metrics = [
    { title: "Ingestion Rate", icon: "trending_up", iconColor: "#A78BFA", value: "1.2", unit: "GB/s" },
    { title: "Active Agents", icon: "groups", iconColor: "#00daf3", value: "242" },
    { title: "Threat Level", icon: "warning", iconColor: "#ef4444", value: "CRITICAL", sub: "3 ONGOING BREACHES" },
    { title: "Memory Usage", icon: "memory", iconColor: "#E9D9FF", value: "84", unit: "%" },
  ];

  return (
    <div className="grid grid-cols-4 gap-4 animate-fade-in-scale">
      {metrics.map((m, idx) => (
        <div key={idx} className="bg-[#0C0814]/80 border border-[#A78BFA]/10 rounded-2xl p-5 flex flex-col justify-between h-28 card-interactive relative overflow-hidden group hover:border-[#A78BFA]/30 hover:bg-[#110D1A] transition-colors shadow-lg">
          <div className="flex justify-between items-center relative z-10 w-full">
            <span className="text-[10px] text-[#8B7BB1] tracking-[0.15em] uppercase font-bold">{m.title}</span>
            <span className="material-symbols-outlined text-[20px]" style={{ color: m.iconColor }}>{m.icon}</span>
          </div>
          <div className="relative z-10 flex flex-col items-start justify-end flex-1 mt-2">
             <div className="flex items-baseline gap-1.5">
               <span className="text-[28px] font-black text-white tracking-tight" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
                 {m.value}
               </span>
               {m.unit && <span className="text-[12px] font-bold tracking-wide" style={{ color: m.iconColor }}>{m.unit}</span>}
             </div>
             {m.sub && <span className="text-[8.5px] font-mono-data text-[#8B7BB1]/80 uppercase tracking-[0.1em] mt-0.5">{m.sub}</span>}
          </div>
        </div>
      ))}
    </div>
  );
}