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

const props = defineProps({
  items: Array,
  withLine: Boolean,
  // this is for change active button
  onclick: Function,
  className: String
});
</script>

<template>
  <div class="flex flex-wrap text-white items-center">
    <button v-for="item in items" :class="twMerge(
      'btn my-1',
      item.active ? 'btn-success' : 'btn-outline-success',
      withLine ? 'line' : 'mx-2 first:ml-0 ',
      className
    )
      " :disabled="item.disabled" :key="item.key" @click.stop.prevent="(e) => {
          item.onClick ? item.onClick(e, item) : onclick(e, item);
        }
        ">
      <slot name="buttonContent" v-bind="{ record: item }">
        {{ item.title }}
      </slot>
    </button>
  </div>
</template>

<style lang="css" scoped>
.line {
  @apply mr-3 relative z-20 after:absolute after:top-1/2 after:-right-3 after:w-3 after:h-[1px] after:bg-info after:z-10 last:after:h-0;
}
</style>
