type KnowledgeLayerRippleProps = {
  layer: number
  size?: 'sm' | 'md'
  className?: string
}

type RippleRing = { r: number; fill?: boolean; opacity: number }

const RING_SETS: Record<number, RippleRing[]> = {
  0: [
    { r: 3.2, fill: true, opacity: 1 },
    { r: 7, opacity: 0.55 },
    { r: 10.5, opacity: 0.3 },
  ],
  1: [
    { r: 5.5, opacity: 0.45 },
    { r: 9, opacity: 0.7 },
    { r: 12, opacity: 0.35 },
  ],
  2: [
    { r: 4.5, opacity: 0.35 },
    { r: 7.5, opacity: 0.55 },
    { r: 10.5, opacity: 0.75 },
    { r: 13, opacity: 0.4 },
  ],
}

function ringsForLayer(layer: number): RippleRing[] {
  if (RING_SETS[layer]) return RING_SETS[layer]
  const count = Math.min(layer + 2, 4)
  return Array.from({ length: count }, (_, i) => ({
    r: 4 + i * 3,
    opacity: 0.35 + i * 0.15,
  })) as RippleRing[]
}

export function KnowledgeLayerRipple({ layer, size = 'md', className = '' }: KnowledgeLayerRippleProps) {
  const rings = ringsForLayer(layer)
  const dim = size === 'sm' ? 'h-7 w-7' : 'h-10 w-10'

  return (
    <span
      className={`hx-layer-ripple hx-layer-ripple--l${layer} ${dim} ${className}`.trim()}
      aria-hidden
    >
      <svg viewBox="0 0 28 28" className="h-full w-full">
        {rings.map((ring, index) => (
          <circle
            key={`${layer}-${ring.r}-${index}`}
            cx="14"
            cy="14"
            r={ring.r}
            fill={ring.fill ? 'currentColor' : 'none'}
            stroke="currentColor"
            strokeWidth={ring.fill ? 0 : 1.35}
            opacity={ring.opacity}
          />
        ))}
      </svg>
    </span>
  )
}