import React from 'react'

/**
 * Nova40 Icon — matches the mobile app icon:
 * Glowing cyan sphere with magenta starburst rays and an orbital ring
 * on a dark navy background.
 */
export default function Nova40Icon({ size = 48, className = '', rounded = true }) {
  return (
    <div
      className={`relative flex-shrink-0 ${className}`}
      style={{ width: size, height: size }}
    >
      <img
        src="/icon.png"
        alt="Nova40"
        width={size}
        height={size}
        className={`w-full h-full object-cover ${rounded ? 'rounded-xl' : ''}`}
      />
    </div>
  )
}

/**
 * Animated CSS-only version of the Nova40 icon for decorative use
 */
export function Nova40IconAnimated({ size = 64, className = '' }) {
  const coreSize = size * 0.3
  const rayLength = size * 0.38
  const ringRx = size * 0.42
  const ringRy = size * 0.14

  return (
    <div
      className={`relative flex-shrink-0 ${className}`}
      style={{ width: size, height: size }}
    >
      <svg viewBox="0 0 100 100" className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <radialGradient id="iconCoreGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#FFFFFF" />
            <stop offset="30%" stopColor="#80F0FF" />
            <stop offset="70%" stopColor="#00CFFF" />
            <stop offset="100%" stopColor="#0080CC" />
          </radialGradient>
          <filter id="iconSoftGlow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="3" />
          </filter>
          <filter id="iconRayGlow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="1" />
          </filter>
        </defs>

        {/* Outer glow */}
        <circle cx="50" cy="50" r="25" fill="#00E5FF" opacity="0.15" filter="url(#iconSoftGlow)" />
        <circle cx="50" cy="50" r="30" fill="#CC44FF" opacity="0.08" filter="url(#iconSoftGlow)" />

        {/* Starburst rays */}
        <g filter="url(#iconRayGlow)">
          {Array.from({ length: 16 }).map((_, i) => {
            const angle = (i * 360) / 16
            const len = i % 2 === 0 ? 38 : 30
            const rad = (angle * Math.PI) / 180
            return (
              <line
                key={i}
                x1="50"
                y1="50"
                x2={50 + len * Math.cos(rad)}
                y2={50 + len * Math.sin(rad)}
                stroke="#FF44CC"
                strokeWidth={i % 2 === 0 ? '0.8' : '0.5'}
                opacity={i % 2 === 0 ? 0.8 : 0.6}
              />
            )
          })}
        </g>

        {/* Orbital ring */}
        <ellipse
          cx="50" cy="50" rx="42" ry="14"
          fill="none" stroke="#00D4FF" strokeWidth="0.8" opacity="0.8"
          transform="rotate(-25, 50, 50)"
        />

        {/* Core sphere */}
        <circle cx="50" cy="50" r="12" fill="url(#iconCoreGlow)">
          <animate attributeName="r" values="12;13;12" dur="3s" repeatCount="indefinite" />
        </circle>
        {/* Highlight */}
        <circle cx="47" cy="47" r="5" fill="white" opacity="0.15" />
      </svg>
    </div>
  )
}
