<template>
    <div v-if="Object.keys(linkData).length">
        <tb-w-section>
            <template #content>
                <div class="tb-w-module-links grid grid-cols-1 md:grid-cols-2 lg: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>
        </tb-w-section>
    </div>
    <div v-else />
</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>
