---
import FriendlyLinkItem from "./FriendlyLinkItem.astro";
import { getCollection } from "astro:content";
import { getLangFromUrl } from "@/i18n";

const lang = getLangFromUrl(Astro.url);
const links = await getCollection("friends");
// const { links = [] } = Astro.props;
---

<div class="friendly-link-list">
    {
        links.map((link: any) => (
            <FriendlyLinkItem
                name={link.data.name}
                description={link.data.description}
                avatar={link.data.avatar}
                url={link.data.url}
            />
        ))
    }
</div>

<style>
    .friendly-link-list {
        max-width: 770px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        align-items: start;
    }

    @media (max-width: 720px) {
        .friendly-link-list {
            grid-template-columns: 1fr;
        }
    }
</style>