interface BCRGLogoProps {
  className?: string
  size?: number
}

export function BCRGLogo({ className = "", size = 32 }: BCRGLogoProps) {
  const generateSineWave = () => {
    const points = []
    const amplitude = 20
    const frequency = 0.08
    const centerY = 50

    for (let x = 0; x <= 100; x += 2) {
      const y = centerY + amplitude * Math.sin(x * frequency)
      points.push(`${x},${y}`)
    }
    return points.join(" ")
  }

  const generateCosineWave = () => {
    const points = []
    const amplitude = 20
    const frequency = 0.08
    const centerY = 50

    for (let x = 0; x <= 100; x += 2) {
      const y = centerY + amplitude * Math.cos(x * frequency)
      points.push(`${x},${y}`)
    }
    return points.join(" ")
  }

  const generateSecondSineWave = () => {
    const points = []
    const amplitude = 15
    const frequency = 0.12
    const centerY = 50
    const phase = Math.PI / 4

    for (let x = 0; x <= 100; x += 2) {
      const y = centerY + amplitude * Math.sin(x * frequency + phase)
      points.push(`${x},${y}`)
    }
    return points.join(" ")
  }

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      {/* Background square with rounded corners */}
      <rect width="100" height="100" rx="8" fill="currentColor" fillOpacity="0.05" />

      {/* Sine wave */}
      <polyline
        points={generateSineWave()}
        stroke="var(--neon-cyan)"
        strokeWidth="2.5"
        fill="none"
        opacity="0.9"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="drop-shadow-[0_0_8px_rgba(0,255,255,0.5)]"
      />

      {/* Cosine wave - overlapping with sine */}
      <polyline
        points={generateCosineWave()}
        stroke="var(--neon-cyan)"
        strokeWidth="2.5"
        fill="none"
        opacity="0.7"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="drop-shadow-[0_0_8px_rgba(0,255,255,0.4)]"
      />

      {/* Third wave with phase shift for more complexity */}
      <polyline
        points={generateSecondSineWave()}
        stroke="var(--neon-cyan)"
        strokeWidth="2"
        fill="none"
        opacity="0.6"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="drop-shadow-[0_0_6px_rgba(0,255,255,0.3)]"
      />

      {/* Outer glow border */}
      <rect
        width="98"
        height="98"
        x="1"
        y="1"
        rx="8"
        stroke="var(--neon-cyan)"
        strokeWidth="1"
        fill="none"
        opacity="0.3"
      />
    </svg>
  )
}