<template>
  <div
       class="fl-tag-status"
       :class="{
        'background': hasBackground,
        'hover': hasHover,
        'border': hasBorder
       }"
       v-on="$listeners"
  >
    <div :style="`background: ${status.color}`"
         class="fl-tag-status-point"></div>
    {{ status.value }}
  </div>
</template>

<script>
export default {
  name: 'FlTagStatus',
  props: {
    hasBackground: {
      type: Boolean,
      default: false
    },
    status: {
      type: Object,
      default: () => ({})
    },
    hasBorder: {
      type: Boolean,
      default: false
    },
    hasHover: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
.fl-tag-status {
  display: flex;
  align-items: center;
  margin-right: 8px;
  padding: 11px 16px;
  border-radius: $border-radius-01;
  cursor: pointer;
}

.background {
  background-color: $light-02;
}

.border {
  border: 1px solid $grey-01;
}

.hover {
  &:hover {
    background-color: $light-02;
  }
}

.fl-tag-status-point {
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 100%;
}
</style>
