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

// The plugin's own router, mounted by the shell at `<prefix>/*` — so everything below this point is the
// plugin's, and react-router nests it natively. The shell knows the prefix; this file does not need to.

const Home = () => (
  <div className="p-8">
    <h1 className="text-xl font-semibold text-duck-dark">Example plugin</h1>
    <p className="mt-2 text-sm text-duck-dark/60">
      Rendered from <code>plugins/example/web/Router.tsx</code>, compiled into the shell's bundle by the generated{' '}
      <code>Plugins.gen.tsx</code>.
    </p>
    <Link className="mt-4 inline-block text-sm text-duck-teal underline" to="/example/deeper">
      A nested route →
    </Link>
  </div>
);

const Deeper = () => (
  <div className="p-8">
    <h1 className="text-xl font-semibold text-duck-dark">Nested</h1>
    <p className="mt-2 text-sm text-duck-dark/60">Proof the wildcard mount hands the whole subtree to the plugin.</p>
    <Link className="mt-4 inline-block text-sm text-duck-teal underline" to="/example">
      ← back
    </Link>
  </div>
);

export default function ExampleRouter() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/deeper" element={<Deeper />} />
    </Routes>
  );
}