import React from "react";
import { Switch as BaseSwitch } from "react-router";
import flattenChildren from "react-flatten-children";
import PublicHome from "./PublicHome";
import PrivateHome from "./PrivateHome";
import Account from "./Account";
import Login from "./Login";

// Create a fragment ready Switch
const Switch = ({ children }) => (
  <BaseSwitch>{flattenChildren(children)}</BaseSwitch>
);

const Routes = ({ isLoggedIn }) => (
  <Switch>
    {isLoggedIn ? (
      <>
        <Route exact path="/" component={PrivateHome} />
        <Route path="/account" component={Account} />
      </>
    ) : (
      <>
        <Route exact path="/" component={PublicHome} />
        <Route path="/login" component={Login} />
      </>
    )}
    <Route path="/about" component={About} />
    <Redirect to="/" />
  </Switch>
);

export default Routes;