import * as React from "react";
import { Route, Switch, Redirect } from "react-router";
import { Layout, Navigation } from "@spendcook/web-ui";
import Menu from "./Menu";
import Shopping from "./Shopping/Shopping";
import NavigationLink from "./NavigationLink";
import Recipes from "./Recipes";
import RecipeView from "./RecipeView";
import RecipeCreate from "./RecipeCreate";

export default function App() {
  return (
    <Layout>
      <Navigation>
        <NavigationLink to="/recipes">Рецепты</NavigationLink>
        <NavigationLink to="/menu">Меню</NavigationLink>
        <NavigationLink to="/shopping">Покупки</NavigationLink>
      </Navigation>
      <Switch>
        <Route path="/recipes/create" component={RecipeCreate} />
        <Route path="/recipes/:recipeId" component={RecipeView} />
        <Route path="/recipes" component={Recipes} />
        <Route path="/menu" component={Menu} />
        <Route path="/shopping" component={Shopping} />
        <Redirect path="/" to="/menu" />
      </Switch>
    </Layout>
  );
}