// 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"
          >
            Review and Implement <ArrowRight className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
}