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

import { createTranslator } from '../../i18n';
const tl = createTranslator(Astro.currentLocale);

const cards = [
    {
        type: 'text',
        icon: 'ph:arrow-circle-down-thin',
        text: 'Dirección de La Gran Carpa Catedral. Puerto Rico',
        bgColor: '#EBE5D0',
        textColor: '#003421'
    },
    {
        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.',
        textColor: '#003421',
        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: 'Enseñanza bíblica aplicada al análisis del mundo contemporáneo.',
        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: 'Compromiso público en la defensa de Israel, la justicia y la paz.',
        textColor: '#003421',
        bgColor: '#EBE5D0'
    },
];
---
<div>
    <div class="container mx-auto">
        <div class="grid grid-cols-2 md:grid-cols-4">
            {
                tl("grid.cards").map((card) => (
                    <GridCard props={card} />
                ))
            }
        </div>
    </div>
</div>