<template>
  <div
    :class="`flex items-center ${
      isBackground ? `w-fit rounded-xl px-2 text-sm bg-${color}-100` : ''
    }`"
  >
    <span
      class="h-1.5 w-1.5 rounded-full"
      :class="classes ? classes : colorClasses"
      aria-hidden="true"
    ></span>
    <div class="ml-2 text-sm font-medium">
      {{ label }}
    </div>
  </div>
</template>
<script>
export default {
  name: "CColorDots",
  props: {
    color: {
      type: String,
    },
    label: {
      type: String,
    },
    isBackground: {
      type: Boolean,
    },
    //to pass color with specified shade, disables default color indicator
    classes: {
      type: String,
      default: null,
    },
  },
  computed: {
    colorClasses() {
      return {
        "bg-gray-500": this.color == "gray",
        "bg-red-500": this.color == "red",
        "bg-yellow-500": this.color == "yellow",
        "bg-green-500": this.color == "green",
        "bg-blue-500": this.color == "indigo",
        "bg-purple-500": this.color == "purple",
        "bg-pink-500": this.color == "pink",
        "bg-indigo-500": this.color == "indigo",
        "bg-orange-500": this.color == "orange",
      };
    },
  },
};
</script>
