import { SketchRouter, Switch, Route, Link } from 'react-sketchapp-router';
import { render, View, Text, Document, Page } from 'react-sketchapp';

const Home = ({ location }) => (
  <View>
    <Link to="/about">
      <Text>Go to About</Text>
    </Link>
  </View>
);

const About = ({ location }) => (
  <View>
    <Link to="/">
      <Text>Go to Home</Text>
    </Link>
  </View>
);

render(
  <Document>
    <Page name="App">
      <SketchRouter locations={['/profile/jack']} viewport={{ name: 'Mobile', width: 360, height: 640 }}>
        <Switch>
          <Route path="/" exact render={({ location }) => <Home /> } />
          <Route path="/about" render={({ location }) => <About />} />
          <Route path="/profile/:user" render={({ location }) => <About />} />
          <Route render={() => <NotFound />}>
        </Switch>
      </SketchRouter>
    </Page>
  </Document>
)