"use client"

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

function Box({ src, title }: { src: string; title: string }) {
    return (
        <motion.button className="item" whileTap={{ scale: 0.95 }}>
            <img
                style={{ width: "100%", height: "100%" }}
                src={`/photos/boxart/${src}.png`}
                alt={title + " boxart"}
            />
        </motion.button>
    )
}

export default function TickerExample() {
    return (
        <div className="container">
            <Ticker
                items={[
                    <Box src="sonic3" title="Sonic 3" />,
                    <Box src="shinobi" title="Shinobi" />,
                    <Box src="sonic1" title="Sonic 1" />,
                    <Box src="streetsofrage2" title="Street Fighter 2" />,
                ]}
                style={{ padding: 20 }}
            />
            <Stylesheet />
        </div>
    )
}

/**
 * ==============   Styles   ================
 */
function Stylesheet() {
    return (
        <style>
            {`
        .container {
            display: flex;
            flex-direction: row;
            gap: 20px;
            align-items: center;
            justify-content: center;
            max-width: 100vw;
            width: 600px;
        }

        .item {
            width: 180px;
            height: 255px;
            overflow: hidden;
            position: relative;
            outline-offset: 2px;
        }

        .item:focus {
            outline: 2px solid #0d63f8;
        }
      `}
        </style>
    )
}