---
import leg from "../assets/leg.webp";
---

<a class="button" id="music" href="https://www.last.fm/user/Fluffy_Bean_" target="_blank">
    <img
        src={leg}
        width="64"
        height="64"
        loading="eager"
        alt="Track cover art"
        id="music-image"
    />
    <ul>
        <li id="music-title" style="font-weight: 600;">Track Name</li>
        <li id="music-artist">by Artist</li>
        <li id="music-album">on Album</li>
    </ul>
</a>

<script>
    document.addEventListener("DOMContentLoaded", async () => {
        const request = await fetch("https://lastfm-last-played.biancarosa.com.br/Fluffy_Bean_/latest-song");
        const data = await request.json();

        ( document.querySelector("#music-image") as HTMLImageElement ).src = data["track"]["image"][1]["#text"];
        ( document.querySelector("#music-title") as HTMLParagraphElement ).innerText = `${data["track"]["name"]}`;
        ( document.querySelector("#music-artist") as HTMLParagraphElement ).innerText = `by ${data["track"]["artist"]["#text"]}`;
        ( document.querySelector("#music-album") as HTMLParagraphElement ).innerText = `on ${data["track"]["album"]["#text"]}`;
    });
</script>