<template>
  <v-menu open-on-hover v-bind="$attrs">
    <template v-slot:activator="{ isActive, props }">
      <v-btn
        class="mr-3"
        density="comfortable"
        :append-icon="isActive ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"
        color="primary" variant="tonal"
        v-bind="props"
      >
        {{ defineProps.btnTitle }}
      </v-btn>
      <!-- <div class="d-flex align-center">
        <div class="btn" v-bind="props">
          <span class="mr-2">{{ defineProps.btnTitle }}</span>
          <span v-if="isActive" class="mdi mdi-menu-up"></span>
          <span v-if="!isActive" class="mdi mdi-menu-down"></span>
        </div>
      </div> -->
    </template>
    <!-- <jobTypeCard @click.stop=""></jobTypeCard> -->
    <slot></slot>
  </v-menu>
</template>
<script setup>

defineOptions({name: 'conditionFilter-index-page'})
const defineProps = defineProps({
  btnTitle: {
    type: String,
    default: 'Text'
  }
})
</script>
<style lang="scss" scoped>
// .btn {
//   color: #333333;
//   background-color: var(--default-bgc);
//   padding: 4px 12px 4px 12px;
//   border-radius: 4px;
//   margin-right: 20px;
//   margin-bottom: 4px;
//   cursor: pointer;
//   &:hover {
//     color: var(--v-primary-base);
//     background-color: #d5e6e8;
//   }
// }
</style>
