<script lang="ts">
  import "./app.css";
  import { Router, Route, Link, navigate } from "svelte-routing";
  import "./app.css";
  import { Navbar, DarkMode, Heading } from "flowbite-svelte";
  import { HomeOutline } from "flowbite-svelte-icons";
  import Books from "./routes/Books.svelte";
  import Clients from "./routes/Clients.svelte";
  import Lendings from "./routes/Lendings.svelte";
  let url: string = $state("/");
</script>

<div
  class="flex-col h-screen items-center bg-gray-50 dark:bg-gray-900 max-h-screen overflow-y-scroll overflow-x-scroll"
>
  <Router bind:url>
    <Navbar class="border-b absolute top">
      <div class="flex gap-5">
        <button
          class="grid grid-cols-3 items-center"
          onclick={() => navigate("/")}
        >
          <HomeOutline />
          <span class="col-span-2">HOME</span>
        </button>
        <Link to="/clients">Clients</Link>
        <Link to="/books">Books</Link>
      </div>
      <DarkMode />
    </Navbar>
    <main class="mt-20">
      <Route path="/"><Lendings clientId={null} /></Route>
      <Route path="/books"><Books /></Route>
      <Route path="/clients"><Clients /></Route>

      <Route path="/clients/:id" let:params>
        <Lendings clientId={parseInt(params.id)} />
      </Route>
    </main>
  </Router>
</div>
