<script>
    const links = [
        {
            title: "Home",
            path: "/",
            icon: IconHome,
        },
    ];
    import { page } from "$app/stores";
    import { IconHome } from "@tabler/icons-svelte";
</script>

<footer>
    {#each links as item}
        <a class="footerLink" href={item.path} class:active={$page.url.pathname == item.path}>
            <svelte:component this={item.icon} />
            <br />
            <span>{item.title}</span>
        </a>
    {/each}
    <div class="data-source">
        <a href="https://nationalrail.co.uk" target="_blank">
            <picture>
                <source srcset="/images/nre/nre-powered_200w.jxl" type="image/jxl" />
                <source srcset="/images/nre/nre-powered_200w.webp" type="image/webp" />
                <img id="nre-logo" src="/images/nre/nre-powered_200w.png" alt="Data sourced from National Rail and others" />
            </picture>
        </a>
    </div>
</footer>

<style>
    footer {
        position: fixed;
        display: flex;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: var(--island-bg-solid);
    }

    .footerLink {
        width: 30%;
        height: 100%;
        background-color: var(--island-bg-solid);
        border-style: solid;
        border-width: 1px;
        border-top: none;
        border-bottom: none;
        border-color: var(--box-shadow-color);
        color: var(--main-text-color);
        text-decoration: double;
        font-weight: 600;
    }

    footer a.active {
        background-color: transparent;
    }
    .data-source {
        flex-grow: 2;
        background: rgb(255, 255, 255);
    }
    #nre-logo {
        width: 150px;
        height: auto;
        margin: auto;
        margin-top: 13px;
    }
    @media only screen and (min-width: 475px) {
        .data-source {
            background: rgb(255, 255, 255);
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%);
        }
        #nre-logo {
            position: absolute;
            right: 0;
            right: 20px;
        }
    }
    img {
        height: 20px;
        width: 20px;
        margin: 0;
        margin-top: 3px;
        padding: 0;
    }
    span {
        margin: 0;
        margin-bottom: 3px;
        padding: 0;
    }
</style>
