"use client"

import { Cursor } from "motion-cursor"

const DISTANCE = 50

export default function CursorDefaultSettings() {
    return (
        <>
            <Cursor style={{ backgroundColor: "white" }} />
            <Cursor
                follow
                offset={pointFromVector(
                    { x: 0, y: 0 },
                    (360 / 6) * 0,
                    DISTANCE
                )}
                center={{ x: 0.5, y: 0.5 }}
                spring={{ stiffness: 50 }}
                exit={{ opacity: 0 }}
                style={{ backgroundColor: "#ff0088", ...dot }}
            />
            <Cursor
                follow
                offset={pointFromVector(
                    { x: 0, y: 0 },
                    (360 / 6) * 1,
                    DISTANCE
                )}
                center={{ x: 0.5, y: 0.5 }}
                spring={{ stiffness: 75 }}
                exit={{ opacity: 0 }}
                style={{ backgroundColor: "#dd00ee", ...dot }}
            />
            <Cursor
                follow
                offset={pointFromVector(
                    { x: 0, y: 0 },
                    (360 / 6) * 2,
                    DISTANCE
                )}
                center={{ x: 0.5, y: 0.5 }}
                spring={{ stiffness: 120 }}
                exit={{ opacity: 0 }}
                style={{ backgroundColor: "#9911ff", ...dot }}
            />
            <Cursor
                follow
                offset={pointFromVector(
                    { x: 0, y: 0 },
                    (360 / 6) * 3,
                    DISTANCE
                )}
                center={{ x: 0.5, y: 0.5 }}
                spring={{ stiffness: 180 }}
                exit={{ opacity: 0 }}
                style={{ backgroundColor: "#0d63f8", ...dot }}
            />
            <Cursor
                follow
                offset={pointFromVector(
                    { x: 0, y: 0 },
                    (360 / 6) * 4,
                    DISTANCE
                )}
                center={{ x: 0.5, y: 0.5 }}
                spring={{ stiffness: 260 }}
                exit={{ opacity: 0 }}
                style={{ backgroundColor: "#0cdcf7", ...dot }}
            />
            <Cursor
                follow
                offset={pointFromVector(
                    { x: 0, y: 0 },
                    (360 / 6) * 5,
                    DISTANCE
                )}
                center={{ x: 0.5, y: 0.5 }}
                spring={{ stiffness: 400 }}
                exit={{ opacity: 0 }}
                style={{ backgroundColor: "#4ff0b7", ...dot }}
            />
        </>
    )
}

/**
 * ==============   Utils   ================
 */

const degreesToRadians = (degrees: number) => (degrees * Math.PI) / 180
function pointFromVector(
    origin: { x: number; y: number },
    angle: number,
    distance: number
) {
    angle = degreesToRadians(angle)

    return {
        x: distance * Math.cos(angle) + origin.x,
        y: distance * Math.sin(angle) + origin.y,
    }
}

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

const dot: React.CSSProperties = {
    width: 20,
    height: 20,
    borderRadius: 10,
}