import { useState } from 'react'
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom'
import CollectionMap from './components/CollectionMap'
import WatchedMap from './components/WatchedMap'
import './App.css'

function App() {
  return (
    <Router>
      <div className="app">
        <NavBar />
        <Routes>
          <Route path="/" element={<CollectionMap />} />
          <Route path="/watched" element={<WatchedMap />} />
        </Routes>
      </div>
    </Router>
  )
}

function NavBar() {
  const location = useLocation()
  
  return (
    <nav className="navbar">
      <div className="nav-container">
        <h1 className="nav-title">Movie Map</h1>
        <div className="nav-links">
          <Link 
            to="/" 
            className={location.pathname === '/' ? 'active' : ''}
          >
            Collection Map
          </Link>
          <Link 
            to="/watched" 
            className={location.pathname === '/watched' ? 'active' : ''}
          >
            Watched Map
          </Link>
        </div>
      </div>
    </nav>
  )
}

export default App