<script setup>
import { ref, onMounted, inject } from 'vue';

const jApi = inject('jApi');

const links = ref([]);

const getLinks = async () => {
    try {
        links.value = await jApi.query(
            `SELECT image, name, description, link FROM link
            ORDER BY name`
        );
    } catch (error) {
        console.error('Error getting links:', error);
    }
};

onMounted(async () => getLinks());
</script>

<template>
    <QPage>
        <QList class="flex justify-center q-gutter-md">
            <QItem
                v-for="(link, index) in links"
                :key="index"
                :href="link.link"
                target="_blank"
                class="flex no-padding"
            >
                <QCard class="card-container">
                    <QImg
                        :src="`http://cdn.verdnatura.es/image/link/full/${link.image}`"
                        width="60px"
                        height="60px"
                    />
                    <span class="card-title q-mt-md">{{ link.name }}</span>
                    <p class="card-description">{{ link.description }}</p>
                </QCard>
            </QItem>
        </QList>
    </QPage>
</template>

<style lang="scss" scoped>
.card-container {
    width: 140px;
    height: 170px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-title {
    font-size: 0.7rem;
    font-weight: bold;
}

.card-description {
    font-size: 0.65rem;
    text-align: center;
}
</style>
