<template>
  <div class="hotpay-price" :class="generateClasses">
    <div class="hotpay-price-header">
      <svg-loader src="assets/images/icon-safe.svg" />
      <span>{{ data.callToAction }}</span>
    </div>

    <div class="hotpay-price-body">
      <strong class="hotpay-price-value">$$ XX,XX</strong>
      <!-- <span class="hotpay-price-description">Em até xx vezes</span> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @import '../stylesheets/variables.scss';

  .hotpay-price {
    margin: 0 0 24px;
    overflow: hidden;
    border: 1px solid $color-green;
    border-radius: 6px 6px 7px 7px;
    background-color: #fff;

    &.template-has-header {
      margin-top: 48px;
    }
  }

  .hotpay-price-header {
    height: 56px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    background-color: $color-green;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.36em;
    text-transform: uppercase;
  }

  .svg-image {
    margin-right: 15px;
  }

  .hotpay-price-body {
    padding: 0 18px 12px;
    display: flex;
    flex-direction: column;
  }

  .hotpay-price-value {
    color: $color-teal;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.3em;
  }

  .hotpay-price-description {
    font-size: 15px;
    line-height: 1.3em;
  }
</style>

<script>
  export default {
    name: 'hotpay-price',
    props: {
      data: Object
    }
  }
</script>
