frontend/src/components/dashboard/RiskModules.jsx

import RiskBadge from '../impact/RiskBadge';

export default function RiskModules({ risks = [] }) {
  const riskList = Array.isArray(risks) ? risks : risks ? [{ name: String(risks), severity: 'medium', description: 'Risk area detected by IBM Bob.' }] : [];
  const normalized = riskList.length
    ? riskList
    : [
        { name: 'entry points', severity: 'medium', description: 'Primary runtime entry points' },
        { name: 'shared contracts', severity: 'medium', description: 'Schemas, models, and validation logic' },
      ];

  return (
    <div className="rounded-lg border border-white/10 bg-white/[0.04] p-5">
      <h3 className="mb-4 text-sm font-semibold text-white">Risk Modules</h3>
      <div className="space-y-2">
        {normalized.slice(0, 5).map((risk) => (
          <div key={risk.name} className="rounded-lg border border-white/10 bg-slate-950/35 p-3">
            <div className="mb-1 flex items-center justify-between gap-3">
              <p className="path-text text-sm font-medium text-white">{risk.name}</p>
              <RiskBadge level={risk.severity || 'medium'} />
            </div>
            <p className="path-text text-xs leading-relaxed text-slate-500">{risk.description || 'High-change area detected by CodeAtlas.'}</p>
          </div>
        ))}
      </div>
    </div>
  );
}