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

export default {
  name: "iconSmallPanel",
  components: {ValueUnit},
  props: ["icon", "label", "value", "unit"]
}
</script>

<template>
  <section class="iconSmallPanel">
    <img v-if="icon" class="icon" :src="icon">
    <div class="fill" v-text="label"/>
    <value-unit :value="value" :unit="unit"/>
  </section>
</template>

<style scoped lang="scss">
.iconSmallPanel {
  font-weight: 400;
  font-size: 15px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 13px;

  .icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }

}
</style>
