---
import GridCard from "../cards/GridCard.astro"

const cards = [
    {
        type: 'text',
        icon: 'ph:arrow-circle-down-thin',
        text: 'Dirección de La Gran Carpa Catedral. Puerto Rico',
        bgColor: '#EBE5D0'
    },
    {
        type: 'image',
        image: 'https://ik.imagekit.io/crpy/grid_image_1.webp',
    },
    {
        type: 'text',
        icon: 'ph:arrow-circle-right-thin',
        text: 'Participación activa en escenarios internacionales.',
        bgColor: '#BEA48D'
    },
    {
        type: 'image',
        image: 'https://ik.imagekit.io/crpy/grid_image_2.webp',
    },
    {
        type: 'image',
        image: 'https://ik.imagekit.io/crpy/grid_image_3.webp',
    },
    {
        type: 'text',
        icon: 'ph:arrow-circle-up-thin',
        text: 'Dirección de La Gran Carpa Catedral. Puerto Rico',
        textColor: '#EBE5D0',
        bgColor: '#003421'
    },
    {
        type: 'image',
        image: 'https://ik.imagekit.io/crpy/grid_image_4.webp',
    },
    {
        type: 'text',
        icon: 'ph:arrow-circle-left-thin',
        text: 'Participación activa en escenarios internacionales.',
        bgColor: '#EBE5D0'
    },
];
---
<div>
    <div class="container mx-auto">
        <div class="grid grid-cols-2 md:grid-cols-4">
            {
                cards.map(card =>(
                    <GridCard props={card} />
                ))
            }
        </div>
    </div>
</div>