<template>
  <div
    :class="[
      'n-pkg-base-n-chip n-chip n-px-3 n-py-2 n-gap-2 n-flex n-align-center',
      `n-chip--${color}`,
    ]"
  >
    <span
      v-if="showIndicator"
      :class="['n-chip-indicator n-radius-50', `n-chip-indicator--${color}`]"
    />

    <span class="n-color-main-font n-text-body3 n-font-normal">
      {{ label }}
    </span>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "NChip",

  props: {
    wrapperClass: {
      type: String,
      default: "",
    },
    label: {
      type: String,
      default: "",
    },
    showIndicator: {
      type: Boolean,
      default: true,
    },
    color: {
      type: String,
      default: "default",
      validator(value) {
        return [
          "default",
          "success",
          "info",
          "warning",
          "danger",
          "primary",
        ].includes(value);
      },
    },
  },
});
</script>

<style scoped>
@import url("./n-chip.css");
</style>
