import React from 'react';
import { Routes, Route } from'react-router-dom';

import { URLs } from './__data__/urls';
import { LandingPage } from './pages/landing';
import { SearchCharacterPage } from './pages/search-character';

export const PageRoutes = () => (
  <Routes>
    <Route path={URLs.ui.charDetail.url} element={<LandingPage />} />
    <Route path={URLs.baseUrl} element={<LandingPage />} />
    {URLs.ui.search && <Route path={URLs.ui.search} element={<SearchCharacterPage />} />}

    <Route path="*" element={<h1>Page not found</h1>} />
  </Routes>
)