team-1/frontend/src/lib/components/SuggestionList.svelte

<script lang="ts">
    import type { Suggestion } from "$lib/types"
    import { ThumbsUp, ThumbsDown } from "@lucide/svelte"

    let { suggestions = $bindable(), roomId }: { suggestions: Suggestion[]; roomId: string } = $props()

    async function vote(idx: number, amount: number, songId: string) {
        suggestions[idx].upvote += amount
        await fetch(`/api/song/voting?room=${roomId}&song=${songId}&increment=${amount}`, { method: "POST" })
    }
</script>

<div class="flex h-full w-full flex-col items-center gap-2 overflow-y-auto">
    {#if suggestions.length == 0}
        <p>No suggestions yet! Try to add a new one using the <b>Add</b> button</p>
    {/if}

    {#each suggestions as sug, idx}
        <div class="flex h-[80px] w-full flex-row gap-2 rounded border-2 border-indigo-600 bg-indigo-500 p-2 shadow-md duration-100 hover:bg-indigo-400">
            <div class="flex w-3/4 flex-row gap-2 items-center">
                <img class="w-[60px] min-w-[60px] rounded" src={`https://lastfm.freetls.fastly.net/i/u/174s/${sug.image_id}.png`} alt="Song cover" />
                <div class="text-white flex-col w-fit h-fit">
                    <b>{sug.title}</b>
                    <p>{sug.artist}</p>
                </div>
            </div>
            <div class="flex w-1/4 flex-row items-center justify-center gap-2">
                <button
                    class="text-green-500"
                    onclick={() => {
                        vote(idx, 1, sug.uuid)
                    }}><ThumbsUp /></button
                >
                <p class="font-semibold text-white">{sug.upvote}</p>
                <button
                    class="duration-100 hover:scale-150 text-red-500"
                    onclick={() => {
                        vote(idx, -1, sug.uuid)
                    }}><ThumbsDown /></button
                >
            </div>
        </div>
    {/each}
</div>