frontend/src/components/admin/AIInsightCard.jsx

// frontend/src/components/admin/AIInsightCard.jsx
import React from "react";
import { ArrowRight, TrendingUp, AlertTriangle, CheckCircle2, XCircle } from "lucide-react";

const typeStyles = {
  growth: "bg-green-50 border-green-200",
  warning: "bg-amber-50 border-amber-200",
  success: "bg-blue-50 border-blue-200",
  decline: "bg-red-50 border-red-200",
};

const typeIcons = {
  growth: TrendingUp,
  warning: AlertTriangle,
  success: CheckCircle2,
  decline: XCircle,
};

const typeIconColors = {
  growth: "text-green-600",
  warning: "text-amber-600",
  success: "text-blue-600",
  decline: "text-red-600",
};

const priorityBadges = {
  high: "bg-red-100 text-red-700",
  medium: "bg-amber-100 text-amber-700",
  low: "bg-blue-100 text-blue-700",
};

export default function AIInsightCard({ insight }) {
  const Icon = typeIcons[insight.type] || AlertTriangle;

  return (
    <div
      className={`bg-white border rounded-xl p-4 shadow-sm ${typeStyles[insight.type] || "border-stone-200"}`}
    >
      <div className="flex items-start justify-between gap-2 mb-2">
        <div className="flex items-center gap-2">
          <Icon className={`w-5 h-5 ${typeIconColors[insight.type] || "text-stone-600"}`} />
          <h3 className="font-semibold text-stone-900 text-sm">{insight.title}</h3>
        </div>
        <span
          className={`text-xs px-2 py-0.5 rounded-full ${priorityBadges[insight.priority] || "bg-stone-100 text-stone-700"}`}
        >
          {insight.priority}
        </span>
      </div>
      <p className="text-sm text-stone-700 mb-3">{insight.description}</p>
      <div className="flex items-center justify-between">
        {insight.metric && (
          <div className="text-xs text-stone-600">
            <span className="font-semibold text-stone-900">{insight.metric.value}</span>{" "}
            {insight.metric.label}
          </div>
        )}
        <button
          type="button"
          className="inline-flex items-center gap-1 text-xs font-medium text-purple-600 hover:text-purple-700"
        >
          {insight.actionLabel} <ArrowRight className="w-3 h-3" />
        </button>
      </div>
    </div>
  );
}