const metrics = [
  {
    label: "Active Agents",
    icon: "sensors",
    value: "14",
    sub: "+2 Synced",
    subColor: "text-[#A78BFA]",
    subIcon: "trending_up",
  },
  {
    label: "Signals Processed",
    icon: "data_exploration",
    value: "8.4k",
    sub: "Last 24h Cycle",
    subColor: "text-zinc-400",
    subIcon: null,
  },
  {
    label: "Open Insights",
    icon: "lightbulb",
    value: "23",
    sub: "4 Critical Priority",
    subColor: "text-[#A78BFA] font-semibold uppercase tracking-tighter",
    subIcon: null,
  },
  {
    label: "Avg Latency",
    icon: "timer",
    value: "184ms",
    sub: "Optimal Range",
    subColor: "text-zinc-400 uppercase tracking-tighter",
    subIcon: null,
  },
];

export default function MetricTiles() {
  return (
      <div className="grid grid-cols-4 gap-6 animate-fade-in-up">
        {metrics.map((metric, index) => (
          <div key={index} className={`glass p-6 rounded-2xl border flex flex-col justify-between relative overflow-hidden group card-interactive cursor-pointer`} style={{ borderColor: 'rgba(255, 255, 255, 0.05)', animationDelay: `${index * 100}ms` }}>
          <div className="flex justify-between items-start mb-4">
            <span className="text-[10px] uppercase tracking-[0.15em] font-semibold text-zinc-400">
              {metric.label}
            </span>
            <span className="material-symbols-outlined" style={{ fontSize: "18px", color: "rgba(167,139,250,0.6)" }}>
              {metric.icon}
            </span>
          </div>
          <div className="text-3xl font-semibold text-white">{metric.value}</div>
          <div className={`text-[11px] mt-3 flex items-center gap-1.5 font-medium ${metric.subColor}`}>
            {metric.subIcon && (
              <span className="material-symbols-outlined" style={{ fontSize: "11px" }}>
                {metric.subIcon}
              </span>
            )}
            <span>{metric.sub}</span>
          </div>
        </div>
      ))}
      </div>
  );
}