@props(['title', 'items'])
<div class="first:border-t-0 border-t border-t-[#ffffff40] pt-4 "
    x-data="{open: false, more: false}"
    x-effect="if (open) $nextTick(() => $refs.scroll.dispatchEvent(new Event('scroll')))">
    <a href="#" class="font-bricolage font-medium flex justify-between mb-3" @click.prevent="open = !open">
        <span>{{ $title }}</span>
        <img src="/images/alt-arrow-down.svg" alt="" class="w-2">
    </a>
    <div class="font-bold leading-relaxed mb-4 relative overflow-hidden" x-transition x-show="open">
        <div class="flex flex-col max-h-32 overflow-auto start-scrollbar"
             x-ref="scroll"
             @scroll="more = $el.scrollHeight - $el.scrollTop - $el.clientHeight > 10">
            @foreach ($items as [$href, $title])
            <a href="{{ $href }}">{{ $title }}</a>
            @endforeach
        </div>
        <div class="absolute h-12 bg-gradient-to-b from-transparent to-[#001F56] inset-x-0 bottom-0 pointer-events-none" x-show="more"></div>
    </div>
</div>