<script setup lang="tsx">
/** @jsxImportSource vue */
import { Cursor, useCursorState, useMagneticPull } from "motion-plus-vue"
import { motion, useDomRef } from "motion-v"

const buttonRef = useDomRef()
const pull = useMagneticPull(buttonRef, 0.1)
const state = useCursorState()

const variants = {
    default: {
        backgroundColor: state.value.theme === "overlay" ? "#eee" : "#7e7e7e",
    },
    pointer: {
        backgroundColor: state.value.theme === "overlay" ? "#fff" : "#ddd",
    },
}

const style = {
    borderRadius: 10,
    mixBlendMode: state.value.theme === "overlay" ? "difference" : "multiply",
}

function Chevron() {
    return (
        <svg
            width="12"
            height="20"
            viewBox="0 0 12 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M10 2L2 10L10 18"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
            />
        </svg>
    )
}
</script>

<template>
    <div class="container">
        <motion.button ref="buttonRef" class="button" while-press="pressed">
            <motion.span :variants="{ pressed: { scale: 0.95 } }" :style="pull">
                <Chevron />
                Appearance
            </motion.span>
        </motion.button>

        <Cursor
            :magnetic="true"
            class="cursor"
            :variants="variants"
            :style="style"
        />
    </div>
</template>

<style>
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

.button {
    background: none;
    padding: 8px;
    color: #0a84ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #fff4;
    border-radius: 0;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 24px;
}

.button > span {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cursor {
    mix-blend-mode: multiply;
}
</style>