import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import Catalog from './pages/Catalog';
import ArtistPage from './pages/ArtistPage';
import ArtistsPage from './pages/ArtistsPage';

const App: React.FC = () => {
  return (
    <Router>
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
        <div className="container">
          <Link className="navbar-brand text-punk" to="/">Панкуха</Link>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <li className="nav-item">
                <Link className="nav-link" to="/">Главная</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/catalog">Каталог</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/artist">Исполнитель</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/artists">Список исполнителей</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/catalog" element={<Catalog />} />
        <Route path="/artist" element={<ArtistPage />} />
        <Route path="/artists" element={<ArtistsPage />} />
      </Routes>
    </Router>
  );
};

export default App;