'use client'

import { ChevronDown } from 'lucide-react'

export function ScrollDownArrow() {
  const scrollToNextSection = () => {
    const nextSection = document.querySelector('#next-section') // Assuming the next section has this id
    if (nextSection) {
      nextSection.scrollIntoView({ behavior: 'smooth' })
    }
  }

  return (
    <button
      onClick={scrollToNextSection}
      className="animate-bounce text-gray-500 hover:text-gray-700"
      aria-label="Scroll to next section"
    >
      <ChevronDown size={32} />
    </button>
  )
}