<script setup lang="ts">
import { Cursor } from "motion-plus-vue"
import { motion } from "motion-v"
import { CSSProperties } from "vue"

const cursor = {
  backgroundColor: "#f5f5f5",
}

const container: CSSProperties = {
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  justifyContent: "center",
  gap: "50px",
}

const button = {
  backgroundColor: "#ff0088",
  color: "#f5f5f5",
  fontSize: "16px",
  padding: "10px 20px",
  borderRadius: "10px",
}

const text = {
  fontSize: "20px",
}

const largeText = {
  fontSize: "64px",
}
</script>

<template>
  <div :style="container">
    <Cursor
      :style="cursor"
      :variants="{ text: { backgroundColor: '#ff0088' } }"
    />
    <motion.button
      :whilePress="{ y: 1, transition: { duration: 0.1 } }"
      :style="button"
    >
      Click me
    </motion.button>
    <p :style="text">
      Hover <span :style="largeText">me</span>
    </p>
  </div>
</template>