/* @refresh reload */
import { render } from 'solid-js/web';
import { Component, createEffect, createSignal, onMount } from 'solid-js';

import {
  Router,
  Routes,
  Route,
  Navigate,
  useParams,
  useNavigate,
  hashIntegration,
  useRouteData,
} from '@solidjs/router';

const Counter: Component = () => {
  const params = useParams();
  const [count, setCount] = createSignal(0);
  createEffect(() => {
    setCount(+params.count);
  });
  const navigate = useNavigate();
  return (
    <>
      <button onClick={() => navigate(`/counter/${count() + 1}`)}>+1</button>
      <div>Count: {count}</div>
    </>
  );
};

const App: Component = () => {
  return (
    <Routes>
      <Route path='/counter/:count' component={Counter} />
      <Route path='/*' element={<Navigate href='/counter/0' />} />
    </Routes>
  );
};
// source={hashIntegration()}
render(
  () => (
    <Router >
      <App />
    </Router>
  ),
  document.getElementById('root') as HTMLElement
);