<script lang="ts">
    import HorizonalStack from "../Utils/HorizonalStack.svelte";
    import Img from '@zerodevx/svelte-img'
    import VerticalStack from "../Utils/VerticalStack.svelte";
    import ZSpacer from "../Utils/ZSpacer.svelte";
    import MediaQuery from 'svelte-media-queries';

    // Set these when using the component
    export let date: string = "null";
    export let imagePath: string = "null";
    export let title: string = "null";
    export let desc: string = "null";

    const timelineCollapseThreshhold : string = '1000px';
    let timelineCollaped: boolean = false;
</script>

<MediaQuery query='(max-width: {timelineCollapseThreshhold})' bind:matches={timelineCollaped} />

<div class="flexStart timelineItemContainer" style="overflow: auto;">
    <div style="padding-top: 10px;">
        {#if imagePath !== "null"}
            <div class="imageContainer">
                <img src={imagePath} class="image" alt="nothing"/>
            </div>
        {/if}
    </div>
    <div class="ItemStrip"/>
    <div class="noPadding">
        <div class="title">{@html title}</div>
        <div class="DateText">{@html date}</div>
        <div class="bodyText">{@html desc}</div>
    </div>
</div>

<style>
    .imageContainer {
        position: relative;
        z-index: -1;

        width: 10vw;
        height: 10vw;

        overflow: hidden;
    }

    .imageContainer img{
        position: absolute;

        height: 100%;
        width: 100%;

        min-width: 100%;
        min-height: 100%;
    }

    .timelineItemContainer{
        column-gap: 3vw;
        margin-top: 10px;
    }

    .noPadding{
        padding: 0;
    }

    .flexStart{
        display: flex;
        justify-content: start;
    }

    .title {
        font-size: 200%;

        display: flex;
        align-content: center;
    }

    .bodyText{
        font-size: 1rem;
    }

    .DateText{
        margin: 0;
        margin-bottom: 0.5rem;

        color: darkgray;

        display: flex;
        align-self: flex-start;
    }

    .ItemStrip{
        min-width: 0.5%;
        display: inline-flex;

        position: relative;

        background-color: rgb(178, 178, 178);
    }
</style>