<script lang="ts">
    import { Duration } from 'luxon';

    import type { CostType } from "../types";
    import village from '../village';

    export let cost: CostType;
    export let duration: number | null = null;


    $: prettyDuration = (duration !== null) ? Duration.fromMillis(duration * 1000).toFormat(`mm:ss:SS`) : '';
</script>

<div class="cost">
    <div
        class:short={ $village.resources.wood < cost.wood }
    >
        <img src="/img/icons/wood.png" alt="Wood" />
        { cost.wood }
    </div>

    <div
        class:short={ $village.resources.stone < cost.stone }
    >
        <img src="/img/icons/stone.png" alt="Stone" />
        { cost.stone }
    </div>

    <div
        class:short={ $village.resources.iron < cost.iron }
    >
        <img src="/img/icons/iron.png" alt="Iron" />
        { cost.iron }
    </div>

    <div
        class:short={ $village.resources.food < cost.food }
    >
        <img src="/img/icons/food.png" alt="Food" />
        { cost.food }
    </div>
    { #if duration !== null }
    <div>
        <img src="/img/icons/time.png" alt="Duration">
        { prettyDuration }
    </div>
    { /if }
</div>

<style>
    .cost {
        align-items: center;
        display: flex;
        gap: 1em;
        justify-content: center;
    }

    .cost div {
        display: flex;
        align-items: center;
        gap: 0.2em;
    }

    .cost .short {
        color: red;
    }
</style>
