// frontend/src/components/admin/AIMetricsOverview.jsx
import React from "react";
import { TrendingUp, TrendingDown } from "lucide-react";

export default function AIMetricsOverview({ metrics }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {metrics.map((metric) => (
        <div
          key={metric.key}
          className="bg-white border border-stone-200 rounded-xl p-4 shadow-sm"
        >
          <div className="flex items-start justify-between mb-2">
            <div className="text-xs font-medium text-stone-500 uppercase tracking-wide">
              {metric.label}
            </div>
            {metric.trend !== undefined && (
              <div
                className={`flex items-center gap-1 text-xs font-medium ${
                  metric.trend >= 0 ? "text-green-600" : "text-red-600"
                }`}
              >
                {metric.trend >= 0 ? (
                  <TrendingUp className="w-3 h-3" />
                ) : (
                  <TrendingDown className="w-3 h-3" />
                )}
                {Math.abs(metric.trend)}%
              </div>
            )}
          </div>
          <div className="text-2xl font-bold text-stone-900 mb-1">
            {metric.value}
          </div>
          <div className="text-xs text-purple-600 font-medium">
            {metric.aiInsight}
          </div>
        </div>
      ))}
    </div>
  );
}