<script lang="ts">
    let { songs, playing } = $props()

    let displaySongs = $derived([
        playing > 0 && playing < songs.length ? songs[playing - 1] : { name: "", image: "" },
        songs[playing],
        playing == songs.length - 1 ? { name: "", image: "" } : songs[playing + 1],
    ])
</script>

<div class="relative flex w-full justify-center overflow-hidden">
    <div class="flex w-fit flex-row gap-4">
        {#each displaySongs as song, i}
            {#if song.name != ""}
                <div class={`relative flex flex-col items-center transition-all duration-300 ${i === 1 ? "z-10" : "z-0 scale-85 opacity-50"}`}>
                    <img
                        class="h-[60vw] max-h-[250px] w-[60vw]
                   max-w-[250px] rounded object-cover transition-all duration-300"
                        src={song.image}
                        alt="Song cover"
                    />
                    {#if i === 1}
                        <h1 class="mt-2">{song.name}</h1>
                    {/if}
                </div>
            {:else}
                <div class="h-[60vw] max-h-[250px] w-[60vw] max-w-[250px]"></div>
            {/if}
        {/each}
    </div>
</div>
