// FindingDot — a severity-colored dot that pops into a node's top-right.

function FindingDot({ x, y, severity, label, visible, i }) {
  const colors = {
    med:      { fill: '#F5C86B', ring: 'rgba(245,200,107,0.35)' },
    high:     { fill: '#D4915D', ring: 'rgba(212,145,93,0.35)'  },
    critical: { fill: '#EF4444', ring: 'rgba(239,68,68,0.40)'   },
  };
  const c = colors[severity];
  return (
    <g className={`finding-dot ${visible ? 'is-visible' : ''}`} style={{ transitionDelay: `${i * 140}ms` }}>
      <circle cx={x} cy={y} r="11" fill={c.ring} className="fd-halo" />
      <circle cx={x} cy={y} r="6"  fill={c.fill} stroke="#0B0F0E" strokeWidth="1.2" />
      <g className="fd-label">
        <rect x={x + 10} y={y - 10} width={label.length * 6.6 + 14} height="18" rx="2"
              fill="#0B0F0E" />
        <text x={x + 17} y={y + 3}
              fontFamily="'JetBrains Mono', ui-monospace, monospace"
              fontSize="10.5" fill="#D7DDD9" letterSpacing="0.02em">
          {label}
        </text>
      </g>
    </g>
  );
}
window.FindingDot = FindingDot;