<script lang="ts">
    import "bootstrap/dist/css/bootstrap.min.css";
    import Tailwind from "./Tailwind.svelte";
    import type { SvelteComponent } from "svelte";
    import { Router, Route } from "svelte-routing";

    import {
        faChartLine,
        faClipboardList,
        faCloudUploadAlt,
        faTrafficLight,
    } from "@fortawesome/free-solid-svg-icons";
    import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";

    import Home from "./routes/Home.svelte";
    import Navbar from "./components/Navbar.svelte";
    import Rules from "./routes/Rules.svelte";
    import RuleLists from "./routes/RuleLists.svelte";
    import Recursors from "./routes/Recursors.svelte";

    export let url = "";
    interface NavLink {
        label: string;
        to: string;
        icon: IconDefinition;
        Component: typeof SvelteComponent;
    }

    const links: NavLink[] = [
        { label: "Stats", to: "/", icon: faChartLine, Component: Home },
        {
            label: "Rules",
            to: "/rules",
            icon: faTrafficLight,
            Component: Rules,
        },
        {
            label: "Rule Lists",
            to: "/rulelists",
            icon: faClipboardList,
            Component: RuleLists,
        },
        {
            label: "Recursors",
            to: "/recursors",
            icon: faCloudUploadAlt,
            Component: Recursors,
        },
    ];
</script>

<Tailwind />
<main class="flex w-full h-full">
    <Router {url}>
        <Navbar {links} />
        <div class="flex-column py-5 px-5 w-full h-full overflow-y-auto">
            {#each links as link}
                <Route path={link.to} component={link.Component} />
            {/each}
        </div>
    </Router>
</main>
