<template>
  <div class="default-card row">
    <div class="icon col-md-3">
      <font-awesome-icon class="bg-primary text-light"  :icon="icon" />
    </div>

    <div class="content col-md-9 akkurat-regular text-left">
      <span>
          <slot name='first'></slot>
      </span>
      <p class="akkurat-bold">R$  <slot name='first-value'></slot> </p>
      <span>
          <slot name='second'></slot>
      </span>
      <p> <slot name='second-value'></slot></p>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        icon:{
            type: String,
            required: true
        },
    }
}
</script>

<style lang="scss" scoped>
.default-card {
  margin: 5px 0px !important;
  padding: 8px 0px;
  background: none !important;
  box-shadow: none !important;
  .content {
    line-height: 100%;
    p {
      padding: 0;
      margin: 0;
    }
    span {
      font-size: 0.7em;
      text-align: left;
    }
  }

  .icon {
    position: relative;
    display: block;
    svg {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      width: 32px;
      height: 32px;
      
      border-radius: 50%;
      padding: 6px;
    }
  }
}
</style>