"use client"

import { Cursor, useCursorState, useMagneticPull } from "motion-plus/react"
import { motion } from "motion/react"
import { useRef } from "react"

export default function IOSPointer() {
    const ref = useRef<HTMLButtonElement>(null)
    const pull = useMagneticPull(ref, 0.1)

    // Handle the color change when hovering over the Examples site popups
    const { zone } = useCursorState()

    return (
        <div className="container">
            <motion.button ref={ref} className="button" whileTap="pressed">
                <motion.span
                    variants={{ pressed: { scale: 0.95 } }}
                    style={pull}
                >
                    <Chevron />
                    Appearance
                </motion.span>
            </motion.button>

            <Cursor
                magnetic
                className="cursor"
                variants={{
                    default: {
                        backgroundColor:
                            zone === "overlay" ? "#eee" : "#7e7e7e",
                    },
                    pointer: {
                        backgroundColor: zone === "overlay" ? "#fff" : "#ddd",
                    },
                }}
                style={{
                    borderRadius: 10,
                    mixBlendMode:
                        zone === "overlay" ? "difference" : "multiply",
                }}
            />

            <Stylesheet />
        </div>
    )
}

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

function Stylesheet() {
    return (
        <style>
            {`
                .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;
                }
            `}
        </style>
    )
}

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"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
            />
        </svg>
    )
}