<script lang="ts">
    import Card from "./Card.svelte";
    import type { CardConfig } from "./Card.types";
    import { ql } from "$lib/stores/quick-links";
    import LinkButton from "$lib/buttons/LinkButton.svelte";

    let upstreamProps: CardConfig = {
        title: "Quick Links",
        showHelp: false,
        showRefresh: false,
        helpText: "",
        onRefresh: () => {},
        refreshing: false,
    };
</script>

<Card config={upstreamProps}>
    <div class="quick-links">
    {#if !$ql.length}
        <LinkButton text={"Add Quick Links"} link={"/more/settings"} />
    {:else}
        
            {#each $ql as link}
                {#if link.length === 3}
                    <LinkButton text={link.toUpperCase()} link={`/ldb?station=${link.toLowerCase()}`} />
                {:else if link.length === 4}
                    <LinkButton text={link.toUpperCase()} link={`/train?headcode=${link.toLowerCase()}`} />
                {/if}
            {/each}
        
    {/if}
    </div>
</Card>

<style>
    .quick-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: auto;
        padding-top: 5px;
    }
</style>
