<template>
  <div
    class="social-sharing-wrapper"
  >
    <social-sharing
      :url="url"
      :title="description"
      :description="description"
      :quote="quote"
      :hashtags="hashtags"
      :twitter-user="twitterUser"
      inline-template
    >
      <div class="social-list">
        <network network="facebook">
          <button>
            <img svg-inline src="../../images/social/svg/facebook.svg" alt="facebook" />
          </button>
        </network>
        <network network="whatsapp">
          <button>
            <img svg-inline src="../../images/social/svg/whatsapp.svg" alt="whatsapp" />
          </button>
        </network>
        <network network="twitter">
          <button>
            <img svg-inline src="../../images/social/svg/twitter.svg" alt="twitter" />
          </button>
        </network>
      </div>
    </social-sharing>
  </div>
</template>

<script>
export default {
  name: 'SocialSharingLink',

  props: {
    url: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: false,
      default: '',
    },
    description: {
      type: String,
      required: false,
      default: '',
    },
    quote: {
      type: String,
      required: false,
      default: '',
    },
    hashtags: {
      type: String,
      required: false,
      default: '',
    },
    twitterUser: {
      type: String,
      required: false,
      default: '',
    },
  },

  created() {
    this.state = this.$props.initialState;
  },

  methods: {
  },
};
</script>

<style lang="scss" scoped>
.social-sharing-wrapper {
  @apply
    my-4
    block;

  .social-list {
    button {
      @apply
        bg-transparent
        border-none
        p-0
        mr-4;

      svg {
        @apply
          w-6
          h-6;
      }
    }
  }
}
</style>