"use client"

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

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

export default function TickerYAxis() {
    return (
        <div className="container">
            <Ticker
                axis="y"
                hoverFactor={0.5}
                items={[
                    <Box src="mariokart64" title="Mario Kart 64" />,
                    <Box src="goldeneye" title="GoldenEye 007" />,
                    <Box src="mario64" title="Super Mario 64" />,
                ]}
                className="ticker"
            />
            <Ticker
                axis="y"
                hoverFactor={0.5}
                velocity={-50}
                items={[
                    <Box src="majorasmask" title="Majora's Mask" />,
                    <Box src="perfectdark" title="Perfect Dark" />,
                    <Box src="goemon" title="Mythical Ninja" />,
                ]}
                className="ticker"
            />
            <Ticker
                axis="y"
                hoverFactor={0.5}
                velocity={70}
                items={[
                    <Box src="ocarinaoftime" title="Zelda: Ocarina of Time" />,
                    <Box src="smashbros" title="Super Smash Bros" />,
                    <Box src="1080" title="1080 Snowboarding" />,
                ]}
                className="ticker"
            />
            <Stylesheet />
        </div>
    )
}

/**
 * ==============   Styles   ================
 */
function Stylesheet() {
    return (
        <style>
            {`
        body {
            overflow: hidden;
        }

        .container {
            display: flex;
            flex-direction: row;
            gap: 20px;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            height: 60vh;
            transform: perspective(700px) rotateX(20deg)
        }

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

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

        .ticker {
            mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
            touch-action: none;
            user-select: none;
            max-height: 100%;
        }
      `}
        </style>
    )
}