---
import { Image } from "astro:assets";
import type { ImageMetadata } from "astro";

const images = import.meta.glob<{ default: ImageMetadata }>("../assets/badges/*.*");

interface Props {
    badges: {
        href?: string,
        title?: string,
        alt: string,
        imagePath: string
    }[]
}

const { badges } = Astro.props;
---

<div class="badges">
    {badges.map((badge) => {
        // hopefully we can dedupe this sometime....
        const isTreatedAsPublic = images[badge.imagePath] === undefined;
        const hasHref = badge.href !== undefined;

        return <>
            {hasHref ? <a href={badge.href} target="_blank" rel="noreferrer noopener">
                {isTreatedAsPublic
                    ? <img src={badge.imagePath} alt={badge.alt} title={badge.title} loading="lazy" decoding="async" width="88" height="31"/>
                    : <Image src={images[badge.imagePath]()} alt={badge.alt} title={badge.title} quality={100} loading="lazy" width="88" height="31"/>
                }
            </a> : <>
                {isTreatedAsPublic
                    ? <img src={badge.imagePath} alt={badge.alt} title={badge.title} loading="lazy" decoding="async" width="88" height="31"/>
                    : <Image src={images[badge.imagePath]()} alt={badge.alt} title={badge.title} quality={100} loading="lazy" width="88" height="31"/>
                }
            </>}
        </>;
    })}
</div>
<style>
    .badges {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .2em;
        image-rendering: pixelated;

        margin-top: 1.25em;
        margin-bottom: 1.25em;

        & a {
            width: 88px;
            height: 31px;
        }
    }
</style>