<template>
  <router-link
    v-if="area"
    :to="{ name: 'area-detail', params: { id: area.id } }"
    class="area-link"
  >
    <GnBadge variant="info">{{ area.display_name }}</GnBadge>
  </router-link>
  <span v-else-if="areaId" class="muted">Area ID: {{ areaId }}</span>
</template>

<script setup>
import { GnBadge } from "gnexus-ui-kit/vue";

defineProps({
  area: { type: Object, default: null },
  areaId: { type: [Number, String], default: null },
});
</script>

<style scoped>
.area-link {
  text-decoration: none;
}

.muted {
  color: var(--color-muted);
  font-size: 13px;
}
</style>