<template>
    <div class="tb-w-module-links grid grid-cols-2 sm:grid-cols-3 gap-4">
        <a
            v-for="element in linkData"
            class="tb-w-module-link flex justify-start items-center mr-2"
            :href="element.url"
        >
            <div
                class="tb-w-module-link__icon-wrapper rounded-full border border-primary-500 h-12 w-12 flex flex-shrink-0 justify-center items-center mr-4">
                <svg
                    class="tb-w-icon tb-w-module-link__icon text-gray-700"
                    style="font-size:1.5rem"
                    focusable="false"
                >
                    <title v-if="$slots.default" :id="autoId">
                        <!-- @slot Default slot for the title attribute -->
                        <slot />
                    </title>
                    <use :xlink:href="`#tb-poi-icon-${element.iconClass}`" />
                </svg>
            </div>
            <p
                class="tb-w-module-link__label font-bold text-lg text-gray-800 break-words border-b border-link-100"
            >
                {{ element.label }}
            </p>
        </a>
    </div>
</template>

<script>
export default {

    name: 'TbWModuleLinks',

    data: () => ({
        linkData: {},
    }),

    created() {
        this.getLinkData();
    },

    methods: {
        getLinkData() {
            if (typeof (document) === 'undefined') {
                return;
            }

            const encodedJson = document.querySelector('#module-links')?.dataset.json;

            if (!encodedJson) {
                return;
            }

            this.linkData = JSON.parse(atob(encodedJson));
        },
    },

};
</script>
