---
import { fetchNowPlaying } from "@utils/data/nowPlaying.js";

const isProduction = import.meta.env.MODE === "production";
const nowPlayingData = await fetchNowPlaying();
---

<span class="loading client-side" id="now-playing-content" set:html={nowPlayingData.content}></span>
<noscript>
  <p>{nowPlayingData.content}</p>
</noscript>

{isProduction && (<script type="module" is:inline>
  async function updateNowPlaying() {
    const response = await fetch("/api/now-playing");
    if (response.ok) {
      const data = await response.json();
      document.getElementById("now-playing-content").innerHTML = data.content;
    }
  }

  setInterval(updateNowPlaying, 180000);
  updateNowPlaying();
</script>)}