'use client'

import { useEffect, useState } from 'react'

export default function ScrollToTop() {
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    const onScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
      setVisible(scrollTop > 130)
    }
    window.addEventListener('scroll', onScroll, { passive: true })
    return () => window.removeEventListener('scroll', onScroll)
  }, [])

  if (!visible) return null

  return (
    <button
      aria-label="Back to top"
      onClick={() => window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })}
      style={{
        position:        'fixed',
        bottom:          '12px',
        right:           '10px',
        zIndex:          99,
        border:          '1px solid #363636',
        outline:         'none',
        background:      '#94d601',
        cursor:          'pointer',
        padding:         '15px',
        borderRadius:    '10px',
        fontSize:        '18px',
        boxShadow:       '3px 3px 3px #363636',
        fontFamily:      '"Autour One", serif',
        lineHeight:      1,
      }}
      onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.background = '#aedad3' }}
      onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.background = '#94d601' }}
    >
      Top
    </button>
  )
}