import type { RiskFlag } from "../../api/feeControl";

export function RiskFlagsCard({ items, title = "风险项" }: { items: RiskFlag[]; title?: string }) {
  if (!items.length) {
    return null;
  }

  return (
    <div className="card-std space-y-3 p-6" data-testid="risk-flags-card">
      <h3 className="text-base font-semibold text-zinc-900">{title}</h3>
      <div className="space-y-3">
        {items.map((item) => (
          <div
            key={item.id}
            className={
              item.level === "high"
                ? "rounded-lg border border-red-200 bg-red-50 p-3"
                : item.level === "medium"
                  ? "rounded-lg border border-amber-200 bg-amber-50 p-3"
                  : "rounded-lg border border-zinc-200 bg-zinc-50 p-3"
            }
          >
            <div className="flex items-center justify-between gap-3">
              <div className="font-medium text-zinc-900">{item.title}</div>
              <span className="text-xs uppercase text-zinc-500">{item.level}</span>
            </div>
            {item.detail ? <div className="mt-1 text-sm text-zinc-600">{item.detail}</div> : null}
            <div className="mt-2 text-xs text-zinc-500">来源：{item.source} · 状态：{item.status}</div>
          </div>
        ))}
      </div>
    </div>
  );
}