import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext';
import MobileHome from '../pages/MobileHome';
import MobileProfile from '../pages/MobileProfile';
import MobileMediaOverviewPage from '../pages/MobileMediaOverviewPage';
import MobileMediaForm from '../components/MobileMediaForm';
import MobileLogin from '../pages/MobileLogin';
import MobileRegister from '../pages/MobileRegister';
import MobileCatalog from '../pages/MobileCatalog';
import MobileRating from '../pages/MobileRating';
import MobileSearch from '../pages/MobileSearch';

const PrivateRoute = ({ children }) => {
  const { user } = useAuth();
  return user ? children : <Navigate to="/login" />;
};

const MobileRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<MobileHome />} />
      <Route path="/login" element={<MobileLogin />} />
      <Route path="/register" element={<MobileRegister />} />
      <Route path="/catalog" element={<MobileCatalog />} />
      <Route path="/rating" element={<MobileRating />} />
      <Route path="/search" element={<MobileSearch />} />
      <Route path="/profile/:login" element={<MobileProfile />} />
      <Route path="/media/:path" element={<MobileMediaOverviewPage />} />
      <Route
        path="/media/:path/edit"
        element={
          <PrivateRoute>
            <MobileMediaForm />
          </PrivateRoute>
        }
      />
      <Route
        path="/media/new"
        element={
          <PrivateRoute>
            <MobileMediaForm />
          </PrivateRoute>
        }
      />
    </Routes>
  );
};

export default MobileRoutes;