<template>
  <div class="hotpay-badge" :class="[data.size, data.theme]">
    <component :is="`hotpay-badge-${data.type.toLowerCase()}`" :theme="data.theme" :data="data" />
  </div>
</template>

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

  .hotpay-badge {
    margin: 0 auto 24px;
    display: flex;
    color: #282828;
    max-width: 400px;

    > div {
      flex: 1;
    }
  }

  .dark {
    color: #fff;
  }

  .default {
    width: 100%;
    font-size: 16px;
  }

  .small {
    width: 50%;
    font-size: 8px;
  }

  .medium {
    width: 75%;
    font-size: 12px;
  }

  .large {
    width: 100%;
    font-size: 16px;
  }
</style>

<script>
  import HotpayBadgeSecurity from './HotpayBadgeSecurity'
  import HotpayBadgeSsl from './HotpayBadgeSsl'
  import HotpayBadgeWarranty from './HotpayBadgeWarranty'

  export default {
    name: 'HotpayBadges',
    components: {
      HotpayBadgeSecurity,
      HotpayBadgeSsl,
      HotpayBadgeWarranty
    },
    props: {
      data: {
        type: Object,
        required: true
      }
    }
  }
</script>
