<script setup>
import { computed, defineProps } from "vue";
import { twMerge } from "tailwind-merge";

const props = defineProps({
  items: Array,
  // this is for change active button
  onclick: Function,
  className: String,
  size: {
    type: String,
    default: "xs",
  },
  color: {
    type: String,
    default: "success",
  },
});

const btnSize = computed(() => `btn-${props.size}`);
const btnColor = computed(() => `btn-${props.color}`);
const btnOutlineColor = computed(() => `btn-outline-${props.color}`);
</script>

<template>
  <div :class="className">
    <button
      type="button"
      v-for="item in items"
      :key="item.key"
      :class="
        twMerge(
          'btn shadow-none rounded-none first-of-type:rounded-l-lg last-of-type:rounded-r-lg',
          item.active ? btnColor : btnOutlineColor,
          btnSize
        )
      "
      :disabled="item.disabled"
      @click.stop.prevent="
        (e) => {
          item.onClick ? item.onClick(e, item) : onclick(e, item);
        }
      "
    >
      <slot name="buttonContent" v-bind="{ item }">
        {{ item.title }}
      </slot>
    </button>
  </div>
</template>

<style lang="scss" scoped></style>
