<template>
  <div class="hotpay-list" :style="generateStyles">
    <hotpay-subtitle :data="data.title" v-if="data.title.content" />
    <hotpay-list-ordered :items="data.items" v-if="data.type === 'ordered'" />
    <hotpay-list-unordered :items="data.items" :type="data.type" v-else />
  </div>
</template>

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

  .hotpay-list {
    margin: 0 0 24px;
    padding: 24px;
    padding-left: 32px;
    border-radius: 7px;

    .hotpay-subtitle {
      margin-top: 0;
      color: inherit;
    }
  }

  ul,
  ol {
    padding-left: 8px;
  }
</style>

<script>
  import HotpayListOrdered from './HotpayListOrdered'
  import HotpayListUnordered from './HotpayListUnordered'
  import HotpayText from '../HotpayText/HotpayText'

  export default {
    name: 'hotpay-list',
    components: {
      HotpayListOrdered,
      HotpayListUnordered,
      HotpayText
    },
    props: {
      data: Object
    },
    computed: {
      generateStyles () {
        return {
          'text-align': this.data.alignment,
          'background-color': this.data.background,
          'color': this.data.fontColor,
          'font-size': this.data.fontSize
        }
      }
    }
  }
</script>
