import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { About } from '@widgets/about'
import { Converter } from '@widgets/currency-converter'
import { Footer } from '@widgets/footer'
import { Header } from '@widgets/header'
import { Hero } from '@widgets/hero'
import { NetworksTable } from '@widgets/networks-table'

export function HomePage() {
  const location = useLocation()

  useEffect(() => {
    if ((location.state as { scrollTo?: string } | null)?.scrollTo === 'about') {
      requestAnimationFrame(() => {
        document.getElementById('about')?.scrollIntoView({ behavior: 'smooth' })
      })
    }
  }, [location.state])

  return (
    <>
      <Header />
      <main>
        <Hero />
        <About />
        <Converter />
        <NetworksTable />
      </main>
      <Footer />
    </>
  )
}