import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import LandingPage from './components/LandingPage';
import MainApp from './components/MainApp'; // 确保这里的路径正确

function App() {
  return (
    <Router>
      <div className="flex flex-col h-screen">
        <nav className="bg-gray-800 text-white p-4 z-50">
          <ul className="flex space-x-4">
            <li>
              <Link to="/" className="hover:text-blue-300">Home</Link>
            </li>
            <li>
              <Link to="/player" className="hover:text-blue-300">Main Player</Link>
            </li>
          </ul>
        </nav>

        <div className="flex-grow overflow-hidden">
          <Routes>
            <Route path="/" element={<LandingPage />} />
            <Route path="/player" element={<MainApp />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;
