// import { lanyard } from "utils/shared/lanyard";
import { useLanyard } from "use-lanyard";
import styles from "styles/Lanyard.module.sass";
import Image from "next/image";
import { useTheme } from 'next-themes'


const Lanyard = () => {
  const id = process.env.NEXT_DISCORD_ID || "318044130796109825";
  const lanyard = useLanyard(id).data;
  const { resolvedTheme: theme } = useTheme()

  if (!lanyard?.listening_to_spotify) return;
  let artists;
  if (lanyard.spotify.artist.split(";").length > 2) {
    artists = [
      lanyard.spotify.artist.split(";")[0],
      lanyard.spotify.artist.split(";")[1],
    ].join(",");
  } else {
    artists = lanyard.spotify.artist.split(";").join(",");
  }


  console.log("lanyard", theme)

  return (
    <>
      <div data-theme={theme} className={[styles.container, styles.badge].join(" ")}>
        <Image
          className={styles.albumart}
          src={lanyard.spotify.album_art_url}
          width={100}
          height={100}
        />
        <div className={styles.artist_song}>
          <p className={styles.song}>{lanyard.spotify.song}</p>
          <p className={styles.artist}>{artists}</p>
        </div>
      </div>
    </>
  );
};

export default Lanyard;