Create AIProgramSuggestion.jsx

frontend/src/components/admin/AIProgramSuggestion.jsx

@@ -0,0 +1,44 @@
+// frontend/src/components/admin/AIProgramSuggestion.jsx
+import React from "react";
+import { Clock, Users, DollarSign, ArrowRight } from "lucide-react";
+
+export default function AIProgramSuggestion({ program }) {
+  return (
+    <div className="bg-white border border-stone-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow">
+      <div className="flex gap-4">
+        {program.image && (
+          <img
+            src={program.image}
+            alt={program.name}
+            className="w-20 h-20 rounded-lg object-cover flex-shrink-0"
+          />
+        )}
+        <div className="flex-1">
+          <h3 className="font-semibold text-stone-900 mb-1">{program.name}</h3>
+          <p className="text-sm text-stone-600 mb-3">{program.description}</p>
+          <div className="flex flex-wrap gap-3 text-xs text-stone-500 mb-3">
+            <div className="flex items-center gap-1">
+              <Users className="w-3 h-3" />
+              {program.targetAudience}
+            </div>
+            <div className="flex items-center gap-1">
+              <Clock className="w-3 h-3" />
+              {program.duration}
+            </div>
+            <div className="flex items-center gap-1 text-green-600 font-medium">
+              <DollarSign className="w-3 h-3" />
+              {program.potentialRevenue}
+            </div>
+          </div>
+          <button
+            type="button"
+            className="inline-flex items-center gap-1 text-sm font-medium text-purple-600 hover:text-purple-700"
+          >
+            Learn More <ArrowRight className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+