'use client'

import { useEffect, useRef } from 'react'

interface ScrollingBackgroundProps {
  imageSrc: string
}

export function ScrollingBackground({ imageSrc }: ScrollingBackgroundProps) {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const container = containerRef.current
    if (!container) return

    let scrollPosition = 0
    const speed = 0.5 // 滚动速度，数字越大滚动越快

    const animate = () => {
      scrollPosition += speed

      // 当滚动到一半时重置（因为我们有两张图片）
      if (scrollPosition >= container.scrollHeight / 2) {
        scrollPosition = 0
      }

      container.scrollTop = scrollPosition
      requestAnimationFrame(animate)
    }

    const animationId = requestAnimationFrame(animate)

    return () => {
      cancelAnimationFrame(animationId)
    }
  }, [])

  return (
    <div
      ref={containerRef}
      className="absolute inset-0 overflow-hidden"
      style={{
        scrollbarWidth: 'none',
        msOverflowStyle: 'none',
      }}
    >
      {/* 隐藏滚动条的样式 */}
      <style jsx>{`
        div::-webkit-scrollbar {
          display: none;
        }
      `}</style>

      {/* 两张相同的图片，用于无缝循环 */}
      <div className="relative">
        <img src={imageSrc} alt="Background" className="block h-auto w-full" />
        <img src={imageSrc} alt="Background" className="block h-auto w-full" />
      </div>
    </div>
  )
}
