---
import { getCollection } from "astro:content";

const badges = await getCollection("badges");
---

<div class="badges">
    {badges.map((badge) => {
        const hasHref = badge.data.href !== undefined;

        // ugh.
        // i wish we could dedupe this, but im not sure how
        return <>
            {hasHref ? <a class="badge" href={badge.data.href} target="_blank" rel="noreferrer noopener">
                {typeof badge.data.path !== "string"
                    ? <img src={badge.data.path.src} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
                    : <img src={badge.data.path} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
                }
            </a> : <>
                {typeof badge.data.path !== "string"
                    ? <img class="badge" src={badge.data.path.src} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
                    : <img class="badge" src={badge.data.path} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" 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;
        }
    }

    .badge {
        transition:
            transform 0.15s,
            box-shadow 0.15s,
            background 0.15s;
    }
    .badge:hover {
        transform: scale(1.5);
        box-shadow: 0 0 0.2em var(--foreground);
        background: var(--foreground);
    }
</style>