---
interface Props {
    items: string[];
    direction?: "normal" | "reverse";
    class?: string;
    duration?: string;
}

const { items, direction = "normal", class: className = "", duration = "46s" } = Astro.props;
const separator = direction === "normal" ? "❖" : "◆";
---

<div class={`marquee ${direction} ${className}`} style={`--marquee-duration: ${duration}`}>
    <div class="marquee-content">
        <div class="marquee-group">
            {items.map((item) => (
                <>
                    <span>{item}</span>
                    <span class="sep">{separator}</span>
                </>
            ))}
        </div>
        <div class="marquee-group" aria-hidden="true">
            {items.map((item) => (
                <>
                    <span>{item}</span>
                    <span class="sep">{separator}</span>
                </>
            ))}
        </div>
    </div>
</div>

<style>
    .marquee {
        flex: 1;
        display: flex;
        overflow: hidden;
        user-select: none;
        height: 100%;
        align-items: center;
        contain: content;
    }

    .marquee-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: max-content;
        min-width: max-content;
        height: 100%;
        white-space: nowrap;
        font-weight: bold;
        letter-spacing: 0;
        text-shadow: 0 0 3px rgba(255, 51, 51, 0.4);
        line-height: 1;
        will-change: transform;
        animation: klbr-marquee-scroll var(--marquee-duration, 46s) linear infinite;
    }
    
    .marquee.reverse .marquee-content {
        color: var(--klbr-alert, #e60012);
        text-shadow: 0 0 3px rgba(230, 0, 18, 0.4);
        animation-direction: reverse;
    }

    .marquee-group {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 4rem;
        min-width: max-content;
        padding-right: 4rem;
    }
    
    .marquee-content span {
        display: inline-block;
    }
    
    .marquee-content .sep {
        color: var(--klbr-accent, #93092b);
        opacity: 0.6;
    }
    
    .marquee.reverse .marquee-content .sep {
        color: #ff3333;
    }

    @keyframes klbr-marquee-scroll {
        from {
            transform: translate3d(0, 0, 0);
        }
        to {
            transform: translate3d(-50%, 0, 0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .marquee-content {
            animation: none;
            transform: none;
            will-change: auto;
        }
    }
</style>