---
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>