<script setup lang="ts">
import { fontHeadingsByLocale } from '~/locale/fonts.ts';
import type { LocaleDescription } from '~/locale/locales.ts';
import { getUrlForLocale } from '~/src/domain.ts';
import { formatFonts } from '~/src/fonts.ts';

withDefaults(defineProps<{
    locales: Record<string, LocaleDescription>;
    filter?: string;
}>(), {
    filter: '',
});
</script>

<template>
    <div class="border rounded overflow-hidden list-group-item-bg">
        <div class="list-group d-flex flex-wrap flex-row list-group-flush">
            <template v-for="(options, locale) in locales">
                <a
                    v-if="filter === '' || options.matches(filter)"
                    :key="locale"
                    :href="getUrlForLocale(locale)"
                    class="list-group-item list-group-item-action list-group-item-hoverable w-md-50 border-start"
                    :style="`--font-headings: ${formatFonts(fontHeadingsByLocale[locale])}`"
                >
                    <div class="h3">
                        <LocaleIcon :locale="options" class="mx-2" />
                        {{ options.name }}
                        <small v-if="options.extra" class="text-muted">({{ options.extra }})</small>
                    </div>
                </a>
            </template>
        </div>
    </div>
</template>
