<template>
  <span class="relative z-0 inline-flex w-full rounded-md shadow-sm">
    <button
      v-if="image"
      type="button"
      class="relative h-9 -ml-px inline-flex items-center rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 overflow-hidden hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
    >
      <img class="h-9 w-9" :src="image" />
    </button>
    <button
      type="button"
      :id="id"
      class="relative h-9 inline-flex w-full items-center justify-between rounded-r-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
      :class="image ? 'rounded-r-md' : 'rounded-md'"
      @click="$emit('action')"
    >
      {{ label }}
      <c-icon type="solid" name="chevron-right" class="h-5 w-5"></c-icon>
    </button>
  </span>
</template>
<script>
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CButtonLink",
  components: { CIcon },
  props: {
    label: {
      type: String,
    },
    id: {
      type: String,
    },
    image: {
      type: String,
      default: null,
    },
    action: {
      type: Function,
    },
  },
};
</script>
