'use client'

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

export function ScrollUp() {
  const { isAtBottom, scrollToTop } = useScroll()

  if (!isAtBottom) {
    return null
  }

  return (
    <button
      onClick={scrollToTop}
      className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 text-2xl font-medium text-[#1c1c49] lg:text-3xl animate-blink"
    >
      <span>top</span>
      <ChevronDoubleUpIcon className="h-6 w-6" />
    </button>
  )
}