<template>
  <component
    :is="linkable ? NuxtLink : 'div'"
    :to="linkable ? localePath('/clientarea/addresses') : undefined"
    class="block"
    :class="{ 'cursor-pointer': selectable }"
    @click="selectable && $emit('select')"
  >
    <Card
      padding="sm"
      :interactive="linkable || selectable"
      :class="[
        isSelected && 'ring-2 ring-primary ring-offset-2'
      ]"
    >
      <Stack gap="2">
        <Stack direction="row" align="center" gap="2">
          <Icon name="lucide:map-pin" size="18" class="text-primary" />
          <Text size="base" weight="semibold">{{ address.name }}</Text>
          <Pill v-if="address.isDefault" variant="outline" size="sm">{{ t('catalogAddress.badges.default') }}</Pill>
        </Stack>
        <Text tone="muted" size="sm">{{ address.address }}</Text>
      </Stack>
    </Card>
  </component>
</template>

<script setup lang="ts">
import { NuxtLink } from '#components'

interface Address {
  uuid?: string | null
  name?: string | null
  address?: string | null
  isDefault?: boolean | null
}

const props = defineProps<{
  address: Address
  selectable?: boolean
  isSelected?: boolean
}>()

defineEmits<{
  (e: 'select'): void
}>()

const localePath = useLocalePath()
const { t } = useI18n()

const linkable = computed(() => !props.selectable && props.address.uuid)
</script>
