<script lang="ts">
    import type { ResourcesType } from "../types";

    export let reward: ResourcesType;
</script>

<div class="reward">
    { #if reward.wood > 0 }
    <div>
        <img src="/img/icons/wood.png" alt="Wood" />
        { reward.wood }
    </div>
    { /if }
    { #if reward.stone > 0 }
    <div>
        <img src="/img/icons/stone.png" alt="Stone" />
        { reward.stone }
    </div>
    { /if }
    { #if reward.iron > 0 }
    <div>
        <img src="/img/icons/iron.png" alt="Iron" />
        { reward.iron }
    </div>
    { /if }
    { #if reward.food > 0 }
    <div>
        <img src="/img/icons/food.png" alt="Food" />
        { reward.food }
    </div>
    { /if }
    { #if reward.culture > 0 }
    <div>
        <img src="/img/icons/culture.png" alt="Culture" />
        { reward.culture }
    </div>
    { /if }
</div>

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

    .reward div {
        display: flex;
        align-items: center;
        gap: 0.2em;
    }
</style>
