<template>
  <div class="wrapper-instance">
    <span class="panoramax-text">{{ $t('general.header.title') }}</span>
    <span v-if="instanceName" class="instance-text">{{ instanceName }}</span>
    <span class="beta-version">{{ $t('general.header.beta_text') }}</span>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
const instanceName = computed((): string | null => {
  const instanceName = import.meta.env.VITE_INSTANCE_NAME
  if (instanceName) return instanceName
  return null
})
</script>

<style lang="scss" scoped>
.wrapper-instance {
  padding: toRem(1) toRem(1) toRem(1) 0;
  position: relative;
}
.panoramax-text,
.instance-text {
  @include text(h2);
}
.panoramax-text {
  font-weight: bolder;
  margin-right: toRem(0.7);
}
.instance-text {
  padding-left: toRem(0.7);
  border-left: toRem(0.1) solid var(--blue-dark);
  font-weight: normal;
}
.beta-version {
  border: toRem(0.1) solid var(--blue);
  color: var(--blue);
  padding: toRem(0.2) toRem(0.5);
  @include text(xss-regular);
  border-radius: toRem(0.5);
  background-color: var(--white);
  position: absolute;
  top: toRem(0.3);
  margin-left: toRem(0.5);
  width: toRem(7);
  text-align: center;
}
</style>
