<template>
    <ul class="filter-list">
        <li v-for="name in allFilters" :key="name" class="filter-list-item my-2">
            <a class="filter-list-item-link">
                <component :is="filterComponents[name]" />
            </a>
        </li>
    </ul>
</template>

<script setup>
const allFilters = [
    'AccessibilityFilter', 
    'BeachfrontFilter', 
    'DedicatedWorkspaceFilter', 
    'HousesLinenFilter',
    'PetsFilter',
    'PoolsFilter',
    'SkiFilter',
    'SustainabilityFilter',
    'UniqueAccommodationsFilter',
    'WaterfrontFilter'
]

const filterComponents = {};

allFilters.forEach(filterName => {
    filterComponents[filterName] = Vue.defineAsyncComponent(() =>
        loadModule(`${SAS_URL}/src/components/shortcodes/home/filter/${filterName}.vue`, options)
    );
});
</script>
