frontend/src/components/admin/AIPaymentAlerts.jsx

// frontend/src/components/admin/AIPaymentAlerts.jsx
import React from "react";
import { AlertCircle, Clock } from "lucide-react";
import { format } from "date-fns";

const urgencyColors = {
  high: "bg-red-50 border-red-200 text-red-700",
  medium: "bg-amber-50 border-amber-200 text-amber-700",
  low: "bg-blue-50 border-blue-200 text-blue-700",
};

export default function AIPaymentAlerts({ alerts }) {
  return (
    <div className="bg-white border border-stone-200 rounded-xl p-4 shadow-sm">
      <div className="flex items-center gap-2 mb-4">
        <AlertCircle className="w-5 h-5 text-red-600" />
        <h3 className="font-semibold text-stone-900">Payment Alerts</h3>
      </div>
      <div className="space-y-3">
        {alerts.map((alert, idx) => (
          <div
            key={idx}
            className={`p-3 rounded-lg border ${urgencyColors[alert.urgency] || "bg-stone-50 border-stone-200"}`}
          >
            <div className="flex items-start justify-between gap-2 mb-1">
              <div className="font-medium text-sm">{alert.memberName}</div>
              <div className="text-sm font-semibold">${alert.amount}</div>
            </div>
            <div className="text-xs mb-2">{alert.reason}</div>
            <div className="flex items-center gap-1 text-xs">
              <Clock className="w-3 h-3" />
              Due: {alert.dueDate ? format(new Date(alert.dueDate), "MMM d, yyyy") : "N/A"}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}