---
import { Image } from "astro:assets";
import logo from "@assets/logo.png";
---

<div class="avatar-wrapper">
	<Image
		alt="My profile picture"
		src={logo}
		class="avatar"
		width={80}
		height={80}
		aria-hidden
	/>
</div>

<style>
	.avatar-wrapper {
		width: 80px;
		height: 80px;
		clip-path: var(--clip-avatar-outer);
		background-color: var(--overlay0);
	}
	.avatar {
		width: 80px;
		height: 80px;
		clip-path: var(--clip-avatar-inner);
	}
</style>

<script>
	const colours = {
		online: "var(--green)",
		idle: "var(--yellow)",
		dnd: "var(--red)",
		offline: "var(--overlay0)"
	};
	const avatarWrapper: HTMLElement =
		document.querySelector(".avatar-wrapper");

	window.addEventListener("lanyard-update", (e: CustomEvent) => {
		const presence = e.detail;
		avatarWrapper.animate(
			[
				{
					backgroundColor:
						colours[presence.discord_status] ?? colours.offline
				}
			],
			{
				duration: 100,
				fill: "forwards"
			}
		);
	});
</script>
