import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { Routes, Link, RouteDefinition } from "./router";

const Home: React.FC<{}> = () => {
  return (
    <>
      <h1>Home</h1>
      <p><Link name="hello" params={{name: "World"}}>Hello World</Link></p>
      <p><Link name="hello" params={{name: "Bob"}}>Hello Bob</Link></p>
    </>
  );
};
  
const Hello: React.FC<{ name: string }> = ({ name }) => {
  return (
    <>
      <h1>Hello { name }!</h1>
      <p><Link name="home">Go Home</Link></p>
    </>
  );
};

const routes: RouteDefinition[] = [
  {
    name: "home",
    path: "/",
    render: () => <HomeScene />,
  },
  {
    name: "hello",
    path: "/hello/:name",
    render: ({ match }) => <Hello name={match.params.name} />,
  },
  {
    name: "error.404",
    render: () => <h1>Not Found</h1>,
  },
];

const Application = () => {
  return (
    <Router>
      <Routes routes={routes} />
    </Router>
  );
};