"use client"

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

function Photo({ src, aspectRatio }: { src: string; aspectRatio: number }) {
    return (
        <motion.img
            className="photo"
            src={`/photos/amsterdam-cyclists/${src}.jpg`}
            alt={"Photo of a cyclist in Amsterdam"}
            style={{ aspectRatio }}
        />
    )
}

export default function TickerExample() {
    return (
        <article>
            <p className="small">
                This example sets <code>overflow</code> to <code>true</code>,
                which allows the ticker items to visually extend outside their
                layout.
            </p>
            <Ticker
                items={[
                    <Photo src="1" aspectRatio={4 / 3} key="1" />,
                    <Photo src="2" aspectRatio={4 / 3} key="2" />,
                    <Photo src="3" aspectRatio={3 / 4} key="3" />,
                    <Photo src="4" aspectRatio={4 / 3} key="4" />,
                    <Photo src="5" aspectRatio={4 / 3} key="5" />,
                    <Photo src="6" aspectRatio={2 / 3} key="6" />,
                ]}
                overflow
                className="ticker"
            />
            <p className="small">
                This makes it easier to embed a ticker with a document flow,
                while extending the ticker items to the edges of the viewport.
            </p>
            <Stylesheet />
        </article>
    )
}

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

        #sandbox {
          align-items: center;
        }

        p code {
          color: var(--text);
        }

        article {
           box-sizing: border-box;
           width: 100%;
           padding: 20px;
           max-width: 600px;
           display: flex;
           flex-direction: column;
           gap: 50px;
        }

        .photo {
           height: 255px;
        }
      `}
        </style>
    )
}