/**
 * RecommendationsPanel
 * --------------------
 * Renders a list of SEO recommendations with a colour-coded
 * priority badge (High / Medium / Low) next to each item.
 *
 * Props:
 *   items – array of { priority, text } objects
 */

interface Recommendation {
  priority: "High" | "Medium" | "Low";
  text: string;
}

interface RecommendationsPanelProps {
  items: Recommendation[];
}

// Tailwind classes for each priority level
const badgeClasses: Record<string, string> = {
  High:   "bg-red-50    text-red-700    border-red-200",
  Medium: "bg-yellow-50 text-yellow-700 border-yellow-200",
  Low:    "bg-blue-50   text-blue-700   border-blue-200",
};

export function RecommendationsPanel({ items }: RecommendationsPanelProps) {
  return (
    <ul className="space-y-3">
      {items.map((rec, i) => (
        <li key={i} className="flex items-start gap-3 text-sm">
          {/* Priority badge */}
          <span
            className={`shrink-0 text-xs font-semibold px-2 py-0.5 rounded border ${
              badgeClasses[rec.priority]
            }`}
          >
            {rec.priority}
          </span>
          {/* Recommendation text */}
          <span className="text-slate-700">{rec.text}</span>
        </li>
      ))}
    </ul>
  );
}
