import Fab from '@mui/material/Fab'
import useScrollTrigger from '@mui/material/useScrollTrigger'
import Zoom from '@mui/material/Zoom'
import { ArrowUp } from 'lucide-react'

export function ScrollToTop() {
  const trigger = useScrollTrigger({ threshold: 400, disableHysteresis: true })

  const handleClick = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  return (
    <Zoom in={trigger}>
      <Fab
        color="primary"
        size="small"
        onClick={handleClick}
        aria-label="К началу страницы"
        sx={{
          position: 'fixed',
          bottom: 24,
          right: 24,
          zIndex: 1100,
        }}
      >
        <ArrowUp size={20} />
      </Fab>
    </Zoom>
  )
}