<template>
  <div>
    <svg
      v-if="name == 'loader'"
      :class="classes"
      class="animate-spin"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
    >
      <circle
        class="opacity-25"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        stroke-width="4"
      ></circle>
      <path class="opacity-75" fill="currentColor" :d="path"></path>
    </svg>
    <svg
      v-if="name !== 'loader' && type == 'solid'"
      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
      :viewBox="viewBox"
      fill="currentColor"
      fill-rule="evenodd"
    >
      <path :d="path" />
    </svg>
    <svg
      v-if="name !== 'loader' && type == 'outline'"
      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
      :viewBox="viewBoxOutline"
      fill="none"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        :d="path"
      />
    </svg>
    <svg
      v-if="name !== 'loader' && type == 'outline-v2'"
      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
      :viewBox="viewBoxOutline"
      fill="none"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="1.5"
        :d="path"
      />
    </svg>
    <svg
      v-if="name !== 'loader' && type == 'mini'"
      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
      :viewBox="viewBox"
      fill="currentColor"
      fill-rule="evenodd"
    >
      <path :d="path" />
    </svg>
    <svg
      v-if="name !== 'loader' && type == 'micro'"
      viewBox="0 0 16 16"
      fill="currentColor"
      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
    >
      <path fillRule="evenodd" :d="path" clipRule="evenodd" />
    </svg>
  </div>
</template>

<script>
import icons from "../../icons.js";
export default {
  name: "CIcon",
  props: {
    name: {
      type: String,
      required: true,
    },
    classes: {
      type: String,
    },
    type: {
      type: String,
    },
    viewBox: {
      type: String,
      default: "0 0 20 20",
    },
    viewBoxOutline: {
      type: String,
      default: "0 0 24 24",
    },
    cursorType: {
      type: String,
      default: "cursor-default",
    },
  },
  computed: {
    path() {
      return icons[this.name];
    },
  },
};
</script>
