<script lang="ts">
    import type { BoxContent } from "$lib/types/boxContent";
    import type { ServiceDetail } from "$lib/types/serviceDetail";
    import { check } from "$lib/scripts/statusChecks";
	import IndicatorDot from "./indicatorDot.svelte";

    export let boxData: BoxContent

    let serviceDetail: ServiceDetail = {
        description: "Service Description, this will be a short string describing the service",
        loginMethod: "FJLA.net login details",
        statusMessage: "OK"
    }

    if (boxData.img === "auto") {
        boxData.img = `/img/box/${boxData.name.toLowerCase()}.svg`
    }
</script>

<a href="{boxData.link}">
    <div class="box">
        <img class="logo" src="{boxData.img}" alt="">

        <header>
            {boxData.name.toUpperCase()}
            <span class="status">
                {#await check(boxData.name) then status}
                    <IndicatorDot {status} />
                {/await}
            </span>
        </header>
        <div class="tooltip">
            <p>{serviceDetail.description}</p>
            <p>Login with: {serviceDetail.loginMethod}</p>
            <p>Current status: {serviceDetail.statusMessage}</p>
        </div>
    </div>
</a>

<style>
    a {
        text-decoration: none;
        color: white;
    }
    .box {
        display: flex;
        background-color: rgba(64,64,64,0.6);
        margin: 10px 10px;
        padding: 20px 20px;
        min-width: 200px;
        border-radius: 30px;
        transition: 0.25s;
    }
    .box:hover .tooltip {
        visibility: visible;
        background-color: rgba(64, 64, 64, 0.8);
    }
    .logo {
        height: 50px;
        width: 50px;
    }
    header {
        width: 100%;
        height: 100%;
        padding-left: 10px;
        text-align: center;
    }
    .tooltip {
       visibility: hidden;
       position: absolute;
       margin-top: 50px;
       text-align: center;
       z-index: 1;
       padding: 10px;
       border-radius: 20px;
       transition-property: all;
       transition-duration: 0.2s;
    }
</style>