<template>
  <div class="current-chat">
    <button type="button" class="current-chat-edit">
      <svg-loader :src="`assets/images/icon-chat-${data.chatService}.svg`" /> {{data.chatTitle}}
    </button>

    <button type="button" class="remove-chat" @click="removeSlotComponent('hotpay-chat')">
      <svg-loader src="assets/images/icon-canvas-close.svg" />
    </button>
  </div>
</template>

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

  .current-chat {
    position: relative;
    background: $color-marine;
    padding: 4px;
    border-radius: 3px;
    color: #fff;
    text-align: center;
  }

  .remove-chat {
    @include clear-button;
    width: 20px;
    height: 20px;
    position: absolute;
    top: -20px;
    right: -20px;
  }

  .current-chat-edit {
    @include clear-button;
    display: inline-flex;
    color: #fff;
    padding: 3px;
    align-items: center;

    .svg-image {
      width: 30px;
      height: 30px;
      margin-right: 8px;
    }
  }
</style>

<script>
  export default {
    name: 'hotpay-chat',
    props: {
      data: Object
    }
  }
</script>
