<script setup lang="ts">
import { ref } from 'vue'
import { DropdownMenu } from 'reka-ui/namespaced'
import { motion, AnimatePresence } from 'motion-v'

const open = ref(false)
const highlight = {
  backgroundColor: "#9911ff",
}
</script>

<template>
  <div class="container">
    <DropdownMenu.Root v-model:open="open">
      <DropdownMenu.Trigger as-child>
        <motion.button
          class="trigger"
          :while-hover="{ scale: 1.05 }"
          :while-press="{ scale: 0.95 }"
        >
          Options ▾
        </motion.button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
          <AnimatePresence>
          <DropdownMenu.Content as-child :side-offset="10">
            <motion.div
              class="content"
              :initial="{ opacity: 0, scale: 0.85 }"
              :animate="{ opacity: 1, scale: 1 }"
              :exit="{ opacity: 0, scale: 0.85 }"
              :transition="{ duration: 0.2 }"
              :style="{ willChange: 'transform, opacity' }"
            >
              <DropdownMenu.Item as-child>
                <motion.button
                  class="item"
                  :while-hover="highlight"
                  :while-focus="highlight"
                  :while-press="{ scale: 0.95 }"
                >
                  Edit
                </motion.button>
              </DropdownMenu.Item>
              <DropdownMenu.Item as-child>
                <motion.button
                  class="item"
                  :while-hover="highlight"
                  :while-focus="highlight"
                  :while-press="{ scale: 0.95 }"
                >
                  Duplicate
                </motion.button>
              </DropdownMenu.Item>
              <DropdownMenu.Separator class="separator" />
              <DropdownMenu.Item as-child>
                <motion.button
                  class="item"
                  :while-hover="highlight"
                  :while-focus="highlight"
                  :while-press="{ scale: 0.95 }"
                >
                  Delete
                </motion.button>
              </DropdownMenu.Item>
            </motion.div>
          </DropdownMenu.Content>
        </AnimatePresence>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  </div>
</template>

<style>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.trigger {
  padding: 8px 16px;
  border-radius: 6px;
  background-color: var(--layer);
  color: #f5f5f5;
  border: 1px solid var(--border);
  cursor: pointer;
}

.content {
  min-width: 160px;
  background-color: var(--layer);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
  box-sizing: border-box;
}

.item {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: #f5f5f5;
  text-align: left;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  box-sizing: border-box;
}

.separator {
  height: 1px;
  background-color: var(--border);
  margin: 4px 0;
}
</style>