<template>
<div class="notify" :class="notifyClasses">
  <div><slot></slot></div>
  <component
      :is="iconComponent"
      weight="regular"
      size="24"
      class="icon-notify"
      :class="notifyIconClasses"
      @click="iconClicked"
  />
</div>
</template>

<script>
import IconButton from "@/components/UI/IconButton.vue";

export default{
  name: "NotificationBar",
  emits: ['icon-clicked'],
  components: {IconButton},
  props: {
    icon: {
      type: String,
      required: true,
    },
    variant: {
      type: String,
      required: true,
      validator: v => ['primary', 'secondary', 'exception'].includes(v),
    }
  },
  computed: {
    notifyClasses() {
      return [
        `notify--${this.variant}`
      ]
    },
    notifyIconClasses() {
      return [
        `icon-notify--${this.variant}`
      ]
    },
    iconComponent() {
      const iconName = this.icon.charAt(0).toUpperCase() + this.icon.slice(1)
      return `Ph${iconName}`
    }
  },
  methods: {
    iconClicked() {
      this.$emit('icon-clicked');
    }
  }
}
</script>

<style scoped>

.notify {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  background-color: #f5f5f5;
  justify-content: space-between;
  border-radius: 8px;
  padding: 6px 12px;
  align-items: center;
  font-size: 14px;

}

.notify--primary {
  background-color: #5AF0B4;
  color: #002F54;
}

.notify--secondary {
  background-color: #002F54;
  color: #ffffff;
}

.notify--exception{
  background-color: #BC2B72;
  color: #ffffff;
}

.icon-notify {
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  color: #002F54;
}

.icon-notify:hover, .icon-notify:active {
  cursor: pointer;
  transform: scale(1.1);
}

.icon-notify--primary {
  color: #002F54;
}

.icon-notify--secondary {
  color: #ffffff;
}

.icon-notify--exception{
  color: #ffffff;
}

</style>