<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,
});
</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 '
        )
      "
      :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>
