<script setup lang="ts">
import { ArrowUpRight } from '@lucide/vue'
import type { EntityRefDto } from '../../api/contracts'
import { entityTypeLabel, routeForEntity } from '../../utils/entityNavigation'

defineProps<{
  entity: EntityRefDto
  compact?: boolean
}>()
</script>

<template>
  <RouterLink
    class="entity-link"
    :class="{ 'entity-link--compact': compact }"
    :to="routeForEntity(entity)"
  >
    <span class="entity-link__type">{{ entityTypeLabel(entity.type) }}</span>
    <strong>{{ entity.label || entity.id }}</strong>
    <ArrowUpRight :size="13" aria-hidden="true" />
  </RouterLink>
</template>

<style scoped>
.entity-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  color: var(--tx);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--space-2) 62%, transparent);
}
.entity-link:hover,
.entity-link:focus-visible {
  border-color: color-mix(in srgb, var(--a-mid) 45%, var(--line));
  background: color-mix(in srgb, var(--a-mid) 10%, var(--space-2));
  outline: none;
}
.entity-link strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.entity-link__type {
  color: var(--tx-3);
  font: 10px/1.2 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.entity-link--compact {
  padding: 5px 8px;
}
</style>
