<template>
  <button
    type="button"
    :disabled="disabled"
    class="rounded-full p-1 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50"
    :class="classes"
    :id="id"
    @click="$emit('action')"
  >
    <c-icon
      :type="icon.type"
      :name="icon.name"
      :viewBox="icon.viewBox"
      :class="icon.class"
      cursorType="cursor-pointer"
    />
  </button>
</template>

<script>
import CIcon from "../CIcon/CIcon.vue";
export default {
  components: { CIcon },
  name: "CCircularButton",
  props: {
    id: {
      type: String,
    },
    type: {
      type: String,
      default: "black",
    },
    icon: {
      type: Object,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    classes() {
      const classNames = {
        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
          this.type == "primary",
        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600 ":
          this.type == "success",
        "text-white bg-gray-900 hover:bg-gray-800 focus:ring-gray-600 ":
          this.type == "black",
        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600 ":
          this.type == "danger",
      };
      return classNames;
    },
  },
};
</script>
