<template>
  <div class="hotpay-badge-security" :class="theme">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 229 241">
      <g v-if="theme === 'dark'"><defs><path id="a" d="M.7.4H202V241H.8z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#2872AD" d="M0 176l11.7 16L0 209.2h63V176M175 150v33.3H228L216.5 167l11.7-17"/><path fill="#2B3990" d="M174.8 150.2l35 10.3 6 38.6-41-10.2M62.8 209l-35-10.3-6-38.6 41 10.4"/><g transform="translate(11 -.397)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#212121" d="M185.4 38.4c-18.5 0-34-12.6-37.3-29.3L101.4.5 54.7 9C51.3 26 36 38.5 17.4 38.5c-2 0-4.2-.2-6.3-.6C4.5 53 .8 70.2.8 89.4.7 207.8 101.2 241 101.3 241c0 0 100.8-33.2 100.8-151.6 0-19.2-3.6-36.4-10.3-51.6-2 .4-4.2.6-6.3.6" mask="url(#b)"/></g><path fill="#242424" d="M112.3 228.2c-17.5-7.2-89-42.7-89-139.2 0-14 2-27.2 6.5-39.5 20.2-.5 38-13 45-30.7l37.5-7 37.7 7c7 17.8 24.8 30.2 45 30.7 4.4 12.3 6.5 25.5 6.5 39.5 0 96.6-71.6 132-89.2 139.2"/><path fill="#FFC20F" d="M26.4 44.7c-5.3 13.6-8 28.6-8 44.3 0 102.3 77.4 138 94 144.4 16.5-6.4 94-42 94-144.4 0-15.7-2.7-30.7-8-44.3h-2c-19.5 0-37-12.3-42.8-30l-41.3-7.8-41 7.6c-6 17.8-23.4 30-43 30h-2zm86 190.8l-.4-.2c-16-6-95.5-42-95.5-146.3 0-16.2 2.8-31.6 8.4-45.7v-.6H28.5c19 0 35.8-12 41-29.2l.3-.6 42.6-8h.2l42.6 8 .3.5c5.3 17.2 22.2 29.3 41 29.3H199.8l.2.5c5.5 14 8.3 29.5 8.3 45.7 0 104.4-79.7 140.2-95.6 146.3l-.4.2z"/><path fill="#FFF" d="M115.5 19l-2-.4-1-1.8-1 1.8-2 .2 1.5 1.5-.4 2 1.8-1 1.8 1.2-.3-2M128 23.2l-1.7-.3-.8-1.8-.8 1.6-1.8.2 1 1.4-.2 1.8 1.6-.8 1.6 1-.2-2M96.7 23.2l1.8-.3.8-1.8.8 1.6 2 .2-1.3 1.4.3 1.8-1.6-.8-1.7 1 .3-2"/><path fill="#128ECE" d="M216 199H27.7L22 160h187.8"/></g></g>
      <g v-else><defs><path id="a" d="M.7.4H202V241H.8V.4z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#2872AD" d="M0 176l11.7 16L0 209.2h63V176M175 150v33.3H228L216.5 167l11.7-17"/><path fill="#2B3990" d="M174.8 150.2l35 10.3 6 38.6-41-10.2M62.8 209l-35-10.3-6-38.6 41 10.4"/><g transform="translate(11 -.397)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#FFC20F" d="M185.4 38.4c-18.5 0-34-12.6-37.3-29.3L101.4.5 54.7 9C51.3 26 36 38.5 17.4 38.5c-2 0-4.2-.2-6.3-.6C4.5 53 .8 70.2.8 89.4.7 207.8 101.2 241 101.3 241c0 0 100.8-33.2 100.8-151.6 0-19.2-3.6-36.4-10.3-51.6-2 .4-4.2.6-6.3.6" mask="url(#b)"/></g><path fill="#FFF" d="M112.3 228.2c-17.5-7.2-89-42.7-89-139.2 0-14 2-27.2 6.5-39.5 20.2-.5 38-13 45-30.7l37.5-7 37.7 7c7 17.8 24.8 30.2 45 30.7 4.4 12.3 6.5 25.5 6.5 39.5 0 96.6-71.6 132-89.2 139.2"/><path fill="#FFF" d="M26.4 44.7c-5.3 13.6-8 28.6-8 44.3 0 102.3 77.4 138 94 144.4 16.5-6.4 94-42 94-144.4 0-15.7-2.7-30.7-8-44.3h-2c-19.5 0-37-12.3-42.8-30l-41.3-7.8-41 7.6c-6 17.8-23.4 30-43 30h-2zm86 190.8l-.4-.2c-16-6-95.5-42-95.5-146.3 0-16.2 2.8-31.6 8.4-45.7v-.6H28.5c19 0 35.8-12 41-29.2l.3-.6 42.6-8h.2l42.6 8 .3.5c5.3 17.2 22.2 29.3 41 29.3H199.8l.2.5c5.5 14 8.3 29.5 8.3 45.7 0 104.4-79.7 140.2-95.6 146.3l-.4.2z"/><path fill="#FFC20F" d="M115.5 19l-2-.4-1-1.8-1 1.8-2 .2 1.5 1.5-.4 2 1.8-1 1.8 1.2-.3-2M128 23.2l-1.7-.3-.8-1.8-.8 1.6-1.8.2 1 1.4-.2 1.8 1.6-.8 1.6 1-.2-2M96.7 23.2l1.8-.3.8-1.8.8 1.6 2 .2-1.3 1.4.3 1.8-1.6-.8-1.7 1 .3-2"/><path fill="#128ECE" d="M216 199H27.7L22 160h187.8"/></g></g>

      <text font-size="41" font-weight="800" transform="translate(57 95)" class="content">
        <tspan x="0" y="0">100%</tspan>
        <tspan x="0" y="40" font-size="28">{{ data.title }}</tspan>
      </text>

      <text font-size="17" font-weight="700" transform="translate(.5 -1)">
        <tspan x="48" y="187">{{ data.buy }}</tspan>
      </text>
    </svg>
  </div>
</template>

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

  .hotpay-badge-security {
    position: relative;
    text-align: center;
    text-transform: uppercase;

    svg {
      width: 100%;
    }

    text,
    .content {
      fill: #fff;
    }
  }

  .light {
    .content {
      fill: #000;
    }
  }
</style>

<script>
  export default {
    name: 'HotpayBadgeSecurity',
    props: {
      theme: String,
      data: Object
    }
  }
</script>
