"use client"

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

function Face() {
    const offset = useItemOffset()
    const rotate = useTransform(offset, [0, 300], [0, 360], { clamp: false })

    return (
        <motion.div className="item" style={{ rotate }}>
            😂
        </motion.div>
    )
}

export default function TickerExample() {
    return (
        <>
            <Ticker items={[<Face />]} />
            <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 {
            font-size: 42px;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
      `}
        </style>
    )
}