<script setup lang="ts">
import BeltMiniBlock from './BeltMiniBlock.vue';
import BeltBlock from './BeltBlock.vue';
import HeaderText from './HeaderText.vue';
</script>

<template>
  <div class="game-header">
    <img alt="Вечерний детектив" class="logo" src="@/assets/logo_belt.png" />
    <BeltMiniBlock class="belt-mini"></BeltMiniBlock>
    <BeltBlock class="belt">
      <div class="position-right-center-block">
        <HeaderText>Вечерний детектив</HeaderText>
        <!-- <MetalPlate class="team-name-block">
            <div class="text-middle-wrapper text-truncate">
              <p>...</p>
            </div>
          </MetalPlate> -->
      </div>
    </BeltBlock>
  </div>
</template>

<style scoped>
.game-header {
  height: 100px;
  position: fixed;
  top: 5px;
  left: 0;
  width: 100%;
  z-index: 2000;
}

.logo {
  width: 90px;
  height: 88px;
  float: left;
  margin: 0 10px;
  position: relative;
  z-index: 20;
  top: 10px;
}

.belt-mini {
  height: 30px;
  position: relative;
  z-index: 10;
}

.belt {
  height: 60px;
  position: relative;
  top: -5px;
}

.position-right-center-block {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
}
</style>
