<template>
  <p
    class="tw-text-sm tw-py-1 tw-px-2 tw-flex-none tw-rounded tw-max-w-full tw-m-0 tw-flex tw-items-center tw-gap-1"
    :class="{ 'tw-bg-gray-100': !transparent }"
  >
    <span>
      <span :aria-label="t('user.username')" class="tw-font-bold tw-block">
        {{ user.username }}
      </span>
      <span class="empty:tw-hidden tw-opacity-80 tw-text-xs">
        <span v-if="name" class="tw-block" :aria-label="t('user.name')">{{ name }}</span>
        <span v-if="user.email" class="tw-block">{{ user.email }}</span>
      </span>
    </span>
    <button
      v-if="removable"
      type="button"
      class="btn tw-text-xs tw-p-0 tw-flex-none tw-ml-auto"
      @click="emit('remove')"
    >
      <icon-system-uicons-cross />
    </button>
  </p>
</template>

<script lang="ts" setup>
import { SteeringUser } from '@/stores/auth'
import { computed } from 'vue'
import { useI18n } from '@/i18n'

defineOptions({
  compatConfig: { MODE: 3 },
})

const props = defineProps<{
  user: SteeringUser
  transparent?: boolean
  removable?: boolean
}>()
const emit = defineEmits<{ remove: [] }>()
const { t } = useI18n()

const name = computed(() => [props.user.firstName, props.user.lastName].join(' ').trim())
</script>