<template>
  <v-menu open-on-hover>
    <template v-slot:activator="{ props }">
      <div class="d-flex align-center" v-bind="props">
        <div class="btn" @mouseover="drawer = true" @mouseleave="drawer = false">
          <span class="mr-2">{{ defineProps.btnTitle }}</span>
          <span v-if="drawer" class="mdi mdi-menu-up"></span>
          <span v-if="!drawer" class="mdi mdi-menu-down"></span>
        </div>
      </div>
    </template>
    <!-- <jobTypeCard @click.stop=""></jobTypeCard> -->
    <slot></slot>
  </v-menu>
</template>
<script setup>
import { ref } from 'vue';

defineOptions({name: 'conditionFilter-index-page'})
const defineProps = defineProps({
  btnTitle: {
    type: String,
    default: 'Text'
  }
})
const drawer = ref(false)
</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>
