<script>
import ValueUnit from "./valueUnit.vue";

export default {
  name: "iconStaPanel",
  components: {ValueUnit},
  props: ["icon", "label", "value", "unit"],
  computed: {
    valueSize: v => v.$attrs.size ?? 'large'
  }
}
</script>

<template>
  <section class="iconStaPanel" :class="[$attrs.size]">
    <div class="block">
      <img class="icon" :src="icon">
      <div v-text="label"/>
      <value-unit :value="value" :unit="unit" :size="valueSize"/>
    </div>
  </section>
</template>

<style scoped lang="scss">
.iconStaPanel {
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;

  .block {
    padding-left: 96px;
    position: relative;

    .icon {
      position: absolute;
      top: -16px;
      left: -32px;
      width: 144px;
    }
  }

  &.small {
    font-size: 14px;

    .block {
      padding-left: 90px;

      .icon {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        width: 64px;
      }
    }

  }

}
</style>
