'use client'

import * as React from 'react'
import { Home } from 'lucide-react'
import { useRouter } from '@/lib/router'

export function BackToTop() {
  const { navigate } = useRouter()
  const [visible, setVisible] = React.useState(false)

  React.useEffect(() => {
    const onScroll = () => {
      setVisible(window.scrollY > 600)
    }
    onScroll()
    window.addEventListener('scroll', onScroll, { passive: true })
    return () => window.removeEventListener('scroll', onScroll)
  }, [])

  const goHome = React.useCallback(() => {
    navigate('home')
  }, [navigate])

  return (
    <button
      onClick={goHome}
      aria-label="Go to first page"
      className={cn(
        'fixed bottom-6 right-6 z-[90] flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-all duration-300',
        visible
          ? 'translate-y-0 opacity-100'
          : 'pointer-events-none translate-y-4 opacity-0',
        'bg-[#0d5d50] text-white hover:bg-[#0a4a3f] hover:scale-110 active:scale-95',
      )}
    >
      <Home className="h-5 w-5" />
    </button>
  )
}

function cn(...classes: (string | boolean | undefined)[]) {
  return classes.filter(Boolean).join(' ')
}