<script setup lang="ts">
defineProps<{
    visitedRegions: Set<string>
    stateLocalCodes: string[]
    regionNames?: Record<string, string>
}>()
</script>

<template>
    <div class="legend">
        <v-chip
            v-for="state in stateLocalCodes"
            :key="state"
            :color="visitedRegions.has(state) ? '#4a90d9' : 'grey'"
            variant="flat"
            size="small"
        >
            <template #prepend>
                <v-icon
                    :icon="visitedRegions.has(state) ? 'mdi-check-circle' : 'mdi-circle-outline'"
                    size="small"
                    class="mr-1"
                />
            </template>
            {{ regionNames?.[state] ?? state }}
        </v-chip>
    </div>
</template>

<style scoped>
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}
</style>
