
import { useState, useEffect } from 'react'
import './App.css'
import { HomePage } from './pages/HomePage/HomePage'
import { RulesPage } from './pages/RulesPage/RulesPage'

function App() {
    const [currentPath, setCurrentPath] = useState(window.location.pathname)

    useEffect(() => {
        const handlePopState = () => {
            setCurrentPath(window.location.pathname)
        }

        window.addEventListener('popstate', handlePopState)
        return () => window.removeEventListener('popstate', handlePopState)
    }, [])

    const getCurrentPage = () => {
        if (currentPath === '/surfing/rules') {
            return <RulesPage />
        } else if (currentPath === '/surfing' || currentPath === '/surfing/') {
            return <HomePage />
        } else {
            window.history.replaceState(null, '', '/surfing')
            return <HomePage />
        }
    }

    return (
        <>
            {getCurrentPage()}
        </>
    )
}

export default App
