<script lang="ts">
    import { onMount } from "svelte";
    import { fade } from "svelte/transition";

    export let updatedTime: Date | undefined;

    let currentTime: string = "00:00:00";
    let updateDisplay: string;
    function updateTime() {
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, "0");
        const mins = now.getMinutes().toString().padStart(2, "0");
        const secs = now.getSeconds().toString().padStart(2, "0");
        currentTime = `${hours}:${mins}:${secs}`;
    }

    onMount(() => {
        console.log("TimeBar component mounted");
        updateTime();
        const interval = setInterval(updateTime, 250);
        return () => clearInterval(interval);
    });
</script>

<div id="TimeBar">
    {#if updatedTime}
        <span in:fade class="updated-time">Updated: {updatedTime.toLocaleTimeString()}</span>
    {:else}
        <span />
    {/if}
    <span class="current-time">{currentTime}</span>
</div>

<style>
    #TimeBar {
        width: 100%;
        background-color: transparent;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
    }
    .updated-time {
        font-family: firamono, "Courier New", Courier, monospace;
        margin-left: 10px;
        font-size: 14px;
    }
    .current-time {
        font-family: firamono, "Courier New", Courier, monospace;
        font-weight: 900;
        vertical-align: middle;
        color: aliceblue;
        margin-right: 10px;
        font-size: 17px;
    }
</style>
