<script>
    import { lives, fragmentsCollected, levelColor } from '../stores/colorStore.js';
    import { LEVELS } from '../game/levelData.js';

    export let levelNumber = 1;

    $: totalFragments = LEVELS.find(l => l.id === levelNumber)?.fragments.length ?? 0;
</script>

<div class="hud">
    <div class="lives">
        {#each {length: 3} as _, i}
            <img
                src={i < $lives ? '/assets/heart_full.png' : '/assets/heart_empty.png'}
                alt="life"
                width="28"
                height="28"
            />
        {/each}
    </div>

    <div class="frags" style="color: {$levelColor}">
        {$fragmentsCollected} / {totalFragments}
    </div>
</div>

<style>
    .hud {
        position: absolute;
        top: 14px;
        left: 14px;
        right: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        pointer-events: none;
        z-index: 10;
    }

    .lives {
        display: flex;
        gap: 6px;
    }

    .frags {
        font-size: 22px;
        font-weight: 500;
        font-family: 'Courier New', Courier, monospace;
        text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    }

</style>