---
import {fetchUserData, type DiscordStatus} from "lanyard-wrapper";

const rawUserData = await fetchUserData("886685857560539176");
const statusColor = () => {
    switch (rawUserData.discord_status) {
        case "online":
        return "#23a55a";
        case "idle":
        return "#f0b232";
        case "dnd":
        return "#f23f43";
        case "offline":
        return "#80848e";
        default:
        return "#80848e";
    }   
};
---

<style define:vars={{statusColor: statusColor()}}>
    div {
        display: flex;
    }
    h3  {
        font-weight: 400;
        margin-left: 20px;
        margin-top: auto;
        margin-bottom: auto;
    }
    img {
        width: 90px;
        height: 90px;
        border-radius: 6px;
        box-shadow: 10px black;
        border-color: var(--statusColor);
        border-style: solid;
        border-width: 2px;
    }
</style>

<div>
    <img src="logo.png" alt="the nin0dev logo">
    <h3>nin0 <span style="font-size: 0.4em;">(he/him)</span></h3>
</div>