---
import {Image} from "astro:assets";
import {getEntry} from "astro:content";
import {siteConfig} from "../../../config";

const { id } = Astro.props;

// Get author data
const authorData = await getEntry('authors', id || '');
const authorAvatar = authorData?.data.mcplayerid ? `/images/avatars/${id}.png` : null;
const authorName = authorData ? authorData.data.name : null;
---
{(siteConfig.displayAvatar && authorData) &&
        <>
            {authorAvatar && <Image src={authorAvatar} alt={`avatar of ${authorName}`} width=16 height=16 />}
            <span>{authorName} @ </span>
        </>
    }
<style>
    img + span {
        margin-left: 0.5rem;
        font-weight: 500;
    }
    img {
        width: 16px;
        height: 16px;
        vertical-align: middle;
    }
</style>