<template>
  <div class="hotpay-advantages" :class="[{ 'hotpay-advantages-vertical': data.orientation === 'vertical'}, data.theme]">
    <div class="hotpay-advantage" v-for="(advantage, index) in data.items" :key="index">
      <hotpay-svg-loader class="hotpay-advantage-icon" :src="advantage.icon" />

      <div class="hotpay-advantage-info">
        <span class="hotpay-advantage-title">{{ advantage.title }}</span>
        <span class="hotpay-advantage-content">{{ advantage.content }}</span>
      </div>
    </div>
  </div>
</template>

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

  .hotpay-advantages {
    margin: 24px 0;
    display: flex;
    justify-content: space-around;
  }

  .hotpay-advantages-vertical {
    padding: 0 0 24px;
    flex-direction: column;

    .svg-image {
      width: 52px;
    }
  }

  .hotpay-advantage {
    max-width: 170px;
    padding: 12px 14px 8px;
    margin: 0 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
    border: 1px solid $color-blue;
    border-radius: 8px;
    font-style: italic;
    text-align: center;

    .hotpay-advantages-vertical & {
      max-width: 100%;
      padding: 15px 25px;
      margin: 0;
      flex-direction: row;
      align-items: center;
      text-align: left;
    }

    + .hotpay-advantage {
      .hotpay-advantages-vertical & {
        margin-top: 21px;
        margin-left: 0;
      }
    }

    .dark & {
      background: #000;
      border-color: #fff;
    }
  }

  path {
    &:not([stroke]) {
      fill: $color-blue;
    }

    &[stroke] {
      stroke: $color-blue;
    }
  }

  .hotpay-advantage-info {
    display: flex;
    flex-direction: column;

    .hotpay-advantages-vertical & {
      margin-left: 20px;
    }
  }

  .hotpay-advantage-icon {
    height: 36px;

    svg {
      height: 100%;
    }
  }

  .hotpay-advantage-title {
    margin: 7px 0 4px;
    color: $color-marine;
    font-size: 14.8px;
    font-weight: 600;
    line-height: 1.35em;

    .hotpay-advantages-vertical & {
      margin-top: 0;
    }
  }

  .hotpay-advantage-content {
    color: $color-light-navy;
    font-size: 12px;
    line-height: 1.33em;
  }

  .dark {
    path {
      &:not([stroke]) {
        fill: #fff;
      }

      &[stroke] {
        stroke: #fff;
      }
    }

    .hotpay-advantage {
      border-color: #fff;
    }

    .hotpay-advantage-content {
      color: #b3b3b3;
    }

    .hotpay-advantage-title {
      color: #fff;
    }
  }
</style>

<script>
  import HotpaySvgLoader from '../HotpaySvgLoader/HotpaySvgLoader'

  export default {
    name: 'HotpayAdvantages',
    components: {
      HotpaySvgLoader
    },
    props: {
      data: {
        types: Object,
        required: true
      }
    }
  }
</script>
