<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { useI18n } from 'vue-i18n';
import { iconClose, iconProfile } from '../icons';
import type { ViewAsSummary } from '../services/api';

defineProps<{
  viewAs: ViewAsSummary;
  busy?: boolean;
}>();

const emit = defineEmits<{
  stop: [];
}>();

const { t } = useI18n();
</script>

<template>
  <section class="view-as-banner" role="status" aria-live="polite">
    <div class="view-as-banner__inner">
      <span class="view-as-banner__label">
        <Icon :icon="iconProfile" class="ui-icon" aria-hidden="true" />
        {{ t('viewAs.banner', { name: viewAs.label }) }}
      </span>
      <button class="ui-button ui-button--ghost ui-button--small view-as-banner__button" type="button" :disabled="busy" @click="emit('stop')">
        <Icon :icon="iconClose" class="ui-icon" aria-hidden="true" />
        {{ t('viewAs.exit') }}
      </button>
    </div>
  </section>
</template>
