---
interface Props {
    items: string[];
    speed?: number;
    reverse?: boolean;
}

const { items, speed = 20, reverse = false } = Astro.props;
---

<div class="marquee-container overflow-hidden whitespace-nowrap bg-brand-dark py-8 md:py-12 border-y border-white/5">
    <div class:list={["marquee-content inline-block animate-marquee flex items-center", reverse && "animate-marquee-reverse"]}>
        {Array(4).fill(0).map(() => (
            <div class="flex items-center">
                {items.map((item) => (
                    <div class="mx-12 md:mx-20 flex items-center gap-8 md:gap-12">
                        <span class="text-4xl md:text-7xl font-serif font-medium tracking-tight text-white uppercase opacity-80">
                            {item}
                        </span>
                        <div class="w-3 h-3 md:w-4 md:h-4 rounded-full bg-brand-green"></div>
                    </div>
                ))}
            </div>
        ))}
    </div>
</div>

<style>
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-25%); }
    }

    @keyframes marquee-reverse {
        0% { transform: translateX(-25%); }
        100% { transform: translateX(0); }
    }

    .animate-marquee {
        animation: marquee 30s linear infinite;
    }

    .animate-marquee-reverse {
        animation: marquee-reverse 30s linear infinite;
    }

    .marquee-container:hover .animate-marquee,
    .marquee-container:hover .animate-marquee-reverse {
        animation-play-state: paused;
    }
</style>