<template>
  <div :class="['assets-summary-item', { 'extended': !mapIsVisible() }]">
    <div class="icon" :style="{ background: item.backgroundColor, border: '1px solid ' + item.backgroundColor }">
      <ods-icon :name="item.icon" size="22" :color="item.color"></ods-icon>
    </div>
    <div class="asset-info">
      <h2>{{ item.totalItem }}</h2>
      <p>{{ translate(item.description) }}</p>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
  name: 'assets-summary-item',
  props: ['item'],
  methods: {
    ...mapGetters([
      'mapIsVisible',
    ]),
    translate(data) {
      return this.$t(`map.${data}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.assets-summary-item {
  &.extended {
    display: flex;
    .asset-info {
      margin-left: 10px;
    }
  }
  .icon {
    border-radius: 50%;
    width: 67px;
    height: 67px;
    border: 1px solid #CCC;
    display: flex;
    justify-content: center;

    * {
      align-self: center;
    }
  }
  .asset-info {
    h2, p {
      text-align: center;
      margin-top: 15%;
    }
    h2 {
      font-weight: 600;
      font-size: 16px;
    }
    p {
      font-size: 11px;
    }
  }
}

</style>
