<template>
  <div class="business-key-figures-container mt-m">
    <div v-if="housing" class="figure">
      <BaseText :color="$_theme('colorSecondary')">
        {{ housing }}
      </BaseText>

      <Title
        tag="h5"
        :style="{ textTransform: 'uppercase' }"
        :color="$_theme('colorSecondary')"
      >
        {{ $_tr('housing') }}
      </Title>
    </div>

    <div v-if="coworker" class="figure">
      <BaseText :color="$_theme('colorSecondary')">
        {{ coworker }}
      </BaseText>

      <Title
        tag="h5"
        :style="{ textTransform: 'uppercase' }"
        :color="$_theme('colorSecondary')"
      >
        {{ $_tr('coworker') }}
      </Title>
    </div>

    <div v-if="housedPeople" class="figure">
      <BaseText :color="$_theme('colorSecondary')">
        {{ housedPeople }}
      </BaseText>

      <Title
        tag="h5"
        :style="{ textTransform: 'uppercase' }"
        :color="$_theme('colorSecondary')"
      >
        {{ $_tr('housedPeople') }}
      </Title>
    </div>
  </div>
</template>

<script>
import { Title, BaseText } from 'inside-collection/atoms'
export default {
  name: 'BusinessKeyFigures',
  components: { Title, BaseText },
  $_i18nRootPath: 'customs.BUSINESS.MODAL',
  props: {
    housing: { type: Number },
    coworker: { type: Number },
    housedPeople: { type: Number }
  }
}
</script>
