"use client"

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

export default function CursorDefaultSettings() {
    const [tooltip, setTooltip] = useState<string | null>(null)

    return (
        <div style={container}>
            <AnimatePresence>
                {tooltip ? (
                    <Cursor
                        style={cursor}
                        follow
                        offset={{ x: 20, y: 20 }}
                        variants={{ exit: { opacity: 0 } }}
                    >
                        <p style={caption}>{tooltip}</p>
                    </Cursor>
                ) : null}
            </AnimatePresence>
            <div style={imageContainer}>
                <motion.img
                    style={image}
                    src="https://framerusercontent.com/images/6CQmm8ZNyouTRoPCdViWPBikfFA.jpg?scale-down-to=400"
                    onHoverStart={() => setTooltip("Bijmer")}
                    onHoverEnd={() => setTooltip(null)}
                />
            </div>
            <div style={imageContainer}>
                <motion.img
                    style={image}
                    src="https://framerusercontent.com/images/oMSlMjlNY6VWYRFIwkhpXTfwzXw.jpg?scale-down-to=400"
                    onHoverStart={() => setTooltip("Zuid")}
                    onHoverEnd={() => setTooltip(null)}
                />
            </div>
        </div>
    )
}

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

const imageContainer: React.CSSProperties = {
    width: 200,
    height: 280,
    overflow: "hidden",
    borderRadius: 10,
}

const image: React.CSSProperties = {
    width: "100%",
    height: "100%",
    objectFit: "cover",
}

const cursor: React.CSSProperties = {
    backgroundColor: "#f5f5f5",
    borderRadius: 10,
}

const caption: React.CSSProperties = {
    color: "#0f1115",
    fontSize: 18,
    padding: 15,
    margin: 0,
}

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