"use client"

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

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

    return (
        <>
            <div className="container">
                <AnimatePresence>
                    {tooltip ? (
                        <Cursor
                            className="cursor"
                            follow
                            offset={{ x: 20, y: 20 }}
                            variants={{ exit: { opacity: 0 } }}
                            key="tooltip"
                            style={{ borderRadius: 5 }}
                        >
                            <p className="caption">{tooltip}</p>
                        </Cursor>
                    ) : null}
                </AnimatePresence>
                <div className="image-container">
                    <motion.img
                        className="image"
                        src="https://framerusercontent.com/images/B0K9QMUiWeDySxhGs5D2pwZro.jpg?scale-down-to=1200"
                        onHoverStart={() => setTooltip("Fuji X100V")}
                        onHoverEnd={() => setTooltip(null)}
                    />
                </div>
                <div className="image-container">
                    <motion.img
                        className="image"
                        src="https://framerusercontent.com/images/wpo2YWgUBC1S6zOjEXldRDKelKA.jpg?scale-down-to=1200"
                        onHoverStart={() => setTooltip("Fuji XT5")}
                        onHoverEnd={() => setTooltip(null)}
                    />
                </div>
            </div>
            <StyleSheet />
        </>
    )
}

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

function StyleSheet() {
    return (
        <style>{`
            body {
              overflow: hidden;
            }

            .image-container {
                width: 350px;
                height: 480px;
                overflow: hidden;
                border-radius: 10px;
            }

            .image {
                width: 100%;
                height: 100%;
                object-position: center right;
                object-fit: cover;
            }

            .cursor {
                background-color: rgba(255, 255, 255, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.3);
            }

            .caption {
                color: #f5f5f5;
                font-size: 11px;
                line-height: 1;
                text-transform: uppercase;
                font-variation-settings: 'opsz' 20, 'wght' 620;
                padding: 5px 7px;
                margin: 0;
            }

            .container {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 10px;
            }

            @media (max-width: 620px) {
                .container {
                    position: absolute;
                    top: 65px;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        `}</style>
    )
}