import { motion } from 'framer-motion'
import { useEffect, useRef } from 'react'

const SnowPeaks = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    
    const ctx = canvas.getContext('2d')
    if (!ctx) return

    canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight

    // Create static snowflakes
    const snowflakes = Array.from({ length: 100 }, () => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      size: Math.random() * 3 + 1,
    }))

    // Draw peaks and static snow
    const render = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      
      // Draw peaks
      ctx.beginPath()
      ctx.moveTo(0, canvas.height)
      ctx.lineTo(canvas.width * 0.2, canvas.height * 0.3)
      ctx.lineTo(canvas.width * 0.4, canvas.height * 0.6)
      ctx.lineTo(canvas.width * 0.6, canvas.height * 0.2)
      ctx.lineTo(canvas.width * 0.8, canvas.height * 0.5)
      ctx.lineTo(canvas.width, canvas.height * 0.4)
      ctx.lineTo(canvas.width, canvas.height)
      ctx.fillStyle = '#F5F7F9'
      ctx.fill()

      // Draw static snowflakes
      snowflakes.forEach(flake => {
        ctx.beginPath()
        ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2)
        ctx.fillStyle = '#F5F7F9'
        ctx.fill()
      })
    }

    render()
  }, [])

  return (
    <motion.div 
      className="relative h-48 overflow-hidden"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      <canvas 
        ref={canvasRef}
        className="w-full h-full bg-primary"
      />
    </motion.div>
  )
}

export default SnowPeaks