'use client'

import { ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
import { useScroll } from '@/hooks/useScroll'

export function ScrollDown() {
  const { isAtBottom, scrollToNext } = useScroll()

  if (isAtBottom) {
    return null
  }

  return (
    <button
      onClick={scrollToNext}
      className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 text-2xl font-medium text-white lg:text-3xl animate-blink"
    >
      <span>scroll</span>
      <ChevronDoubleDownIcon className="h-6 w-6" />
    </button>
  )
}