@props([
    'items' => [],
])

@php
    $texts = collect($items)->map(function ($item) {
        return is_array($item) ? ($item['text'] ?? '') : (string) $item;
    })->filter()->values();
@endphp

@if ($texts->isNotEmpty())
    <div
        {{ $attributes->merge([
            'class' => 'bg-[var(--color-primary)] px-4 py-2 text-center text-sm text-white',
        ]) }}
    >
        @if ($texts->count() === 1)
            <p>{{ $texts->first() }}</p>
        @else
            <div
                x-data="{
                    items: @js($texts->all()),
                    index: 0,
                    init() {
                        setInterval(() => {
                            this.index = (this.index + 1) % this.items.length;
                        }, 4000);
                    }
                }"
            >
                <p x-text="items[index]"></p>
            </div>
        @endif
    </div>
@endif