<template>
  <div>
    <div class="dropdown">
      <slot name="button" />
      <div id="myDropdown" class="dropdown-content" :class="{ show: show }">
        <slot name="list" />
      </div>
    </div>
    <!-- handle close away -->
    <div v-if="show" class="wrap-outline" @click="handleClose"></div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: [Boolean],
      default: false,
    },
  },
  methods: {
    handleClose() {
      this.$emit("handleClose");
    },
  },
};
</script>

<style lang="scss">
@use "@/assets/style/_color.scss" as *;

.wrap-outline {
  width: 100%;
  height: 100vh;
  top: 0px;
  position: fixed;
  left: 0px;
  z-index: 1;
}

.dropdown {
  position: relative;
  display: inline-block;

  button,
  a {
    position: relative;
    z-index: 2;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    min-width: 105px;
    overflow: auto;
    z-index: 2;
    box-shadow: 0px 1px 6px rgb(11 60 93 / 12%),
      0px 4px 18px 3px rgb(46 50 52 / 8%);
    border-radius: 6px;
    border: 1px solid $neutral-2;
    background: $neutral-0;
    padding: 4px 0;
    font-size: 14px;

    a {
      color: $neutral-6;
      padding: 8px 12px;
      text-decoration: none;
      display: block;
    }

    button {
      color: $neutral-6;
      font-size: 14px;
      padding: 8px 12px;
      width: 100%;
      min-width: max-content;
      border: none;
      background: none;
      text-align: left;
      cursor: pointer;
    }

    a:hover,
    button:hover {
      background-color: $neutral-1;
    }

    .danger {
      color: $critical-4;
    }
  }

  .show {
    display: block;
  }
}
</style>
