<script lang="ts">
    import Icon from "svelte-awesome";
    import { Link } from "svelte-routing";

    import type { SvelteComponent } from "svelte";
    import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";

    interface NavLink {
        label: string;
        to: string;
        icon: IconDefinition;
        Component: typeof SvelteComponent;
    }

    export let links: NavLink[] = [];
    $: currentPath = location.pathname;
</script>

<nav class="bg-gray-700 text-gray-300 w-1/8 py-5 px-2 shadow-md">
    <ul class="m-0 p-0 h-full">
        {#each links as l}
            <li class:selected={l.to === currentPath} class="link-item">
                <Link
                    class="flex flex-col justify-center text-gray-300 hover:text-gray-500 no-underline"
                    to={l.to}
                >
                    <Icon
                        class="w-full text-gray-300"
                        data={l.icon}
                        label={l.label}
                        scale="1.75"
                    />
                    <span class="text-sm">{l.label}</span>
                </Link>
            </li>
        {/each}
    </ul>
</nav>

<style lang="postcss">
    .link-item {
        @apply my-5 py-2 flex justify-center no-underline;
    }

    .link-item span {
        margin-top: 5px;
        @apply no-underline;
    }

    /* .selected span {
        text-decoration: underline !important;
        @apply text-white underline;
    } */
</style>
