"use client"

import { Ticker } from "motion-plus/react"
import { motion, useMotionValue } from "motion/react"

function Box({ src, title }: { src: string; title: string }) {
    return (
        <motion.div className="item">
            <img
                src={`/photos/boxart/n64/${src}.jpg`}
                alt={title + " boxart"}
                draggable={false}
            />
        </motion.div>
    )
}

export default function TickerDraggable() {
    const offset = useMotionValue(0)

    return (
        <>
            <Ticker
                drag="x"
                _dragX={offset} // Currently a private, but stable Motion API
                offset={offset}
                items={[
                    <Box src="mariokart64" title="Mario Kart 64" />,
                    <Box src="goldeneye" title="GoldenEye 007" />,
                    <Box src="mario64" title="Super Mario 64" />,
                    <Box src="ocarinaoftime" title="Zelda: Ocarina of Time" />,
                    <Box src="smashbros" title="Super Smash Bros" />,
                    <Box src="1080" title="1080 Snowboarding" />,
                    <Box src="majorasmask" title="Majora's Mask" />,
                    <Box src="perfectdark" title="Perfect Dark" />,
                    <Box src="goemon" title="Mythical Ninja" />,
                ]}
                className="ticker"
            />
            <Stylesheet />
        </>
    )
}

/**
 * ==============   Styles   ================
 */
function Stylesheet() {
    return (
        <style>
            {`
        #sandbox {
          align-items: stretch;
        }

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

        .item {
            width: 180px;
            height: 255px;
            overflow: hidden;
            position: relative;
        }

        .item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .ticker {
            mask-image: linear-gradient(to right, transparent 5%, black 10%, black 90%, transparent 95%);
            touch-action: none;
            user-select: none;
        }
      `}
        </style>
    )
}