import * as motion from "motion/react-client"
import { Cursor } from "motion-cursor"

export default function CursorDefaultSettings() {
    return (
        <div style={container}>
            <Cursor
                style={cursor}
                variants={{ text: { backgroundColor: "var(--hue-1)" } }}
            />
            <motion.button
                whileTap={{ y: 1, transition: { duration: 0.1 } }}
                style={button}
            >
                Click me
            </motion.button>
            <p style={text}>
                Hover <span style={largeText}>me</span>
            </p>
        </div>
    )
}

/**
 * ==============   Styles   ================
 */

const cursor: React.CSSProperties = {
    backgroundColor: "var(--white)",
}

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

const button: React.CSSProperties = {
    backgroundColor: "var(--hue-1)",
    color: "var(--white)",
    fontSize: 16,
    padding: "10px 20px",
    borderRadius: 10,
}

const text: React.CSSProperties = {
    fontSize: 20,
}

const largeText: React.CSSProperties = {
    fontSize: 64,
}