<template>
  <div>
    <div
      :class="[
        colorClasses,
        customLineHeight,
        tagClasses,
        useFlex ? 'flex' : 'inline-flex',
      ]"
      class="items-center rounded-md px-2.5 py-0.5 text-sm"
    >
      <span
        v-if="dotIcon"
        class="mr-1.5 h-1.5 w-1.5 rounded-full"
        :class="dotColorClasses"
        aria-hidden="true"
      ></span>
      <c-icon
        v-if="icon && iconPosition == 'left'"
        :type="icon.type"
        :class="icon.class"
        :name="icon.name"
        :viewBox="icon.viewBox"
      ></c-icon>
      {{ label }}
      <c-icon
        v-if="icon && iconPosition == 'right'"
        :type="icon.type"
        :class="icon.class"
        :name="icon.name"
        :viewBox="icon.viewBox"
      ></c-icon>
    </div>
  </div>
</template>
<script>
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CTag",
  components: { CIcon },
  props: {
    label: { type: String },
    color: { type: String, default: "green" },
    tagClasses: {
      type: String,
    },
    icon: {
      type: Object,
    },
    iconPosition: {
      type: String,
      default: "left",
    },
    dotColor: {
      type: String,
      default: "green",
    },
    dotIcon: {
      type: Boolean,
    },
    useFlex: {
      type: Boolean,
      default: false,
    },
    customLineHeight: {
      type: String,
      default: "leading-5",
    },
  },
  computed: {
    colorClasses() {
      return {
        "bg-gray-50 text-gray-800 ring-1 ring-inset ring-gray-500/10":
          this.color == "gray",
        "bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10":
          this.color == "red",
        "bg-yellow-50 text-yellow-800 ring-1 ring-inset ring-yellow-600/20":
          this.color == "yellow",
        "bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20":
          this.color == "green",
        "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10":
          this.color == "blue",
        "bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-700/10":
          this.color == "purple",
        "bg-pink-50 text-pink-700 ring-1 ring-inset ring-pink-700/10":
          this.color == "pink",
        "bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-700/10":
          this.color == "indigo",
        "bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-700/10":
          this.color == "orange",
        "bg-white text-gray-800 ring-1 ring-inset ring-gray-200":
          this.color == "white",
      };
    },
    dotColorClasses() {
      return {
        "bg-gray-500": this.dotColor == "gray",
        "bg-red-500": this.dotColor == "red",
        "bg-yellow-500": this.dotColor == "yellow",
        "bg-green-500": this.dotColor == "green",
        "bg-blue-500": this.dotColor == "indigo",
        "bg-purple-500": this.dotColor == "purple",
        "bg-pink-500": this.dotColor == "pink",
        "bg-indigo-500": this.dotColor == "indigo",
      };
    },
  },
};
</script>
