@props(['title', 'items'])
<div class="first:border-t-0 border-t border-t-on-babyblue pt-4 "
    x-data="{open: false, more: false}"
    x-effect="if (open) $nextTick(() => $refs.scroll.dispatchEvent(new Event('scroll')))">
    <button class="font-headline font-medium inline-flex w-full justify-between mb-3 text-on-babyblue select-none" @click.prevent="open = !open">
        <span class="block">{{ $title }}</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="block w-2 shrink-0 transition-transform duration-300" :class="open ? 'rotate-180' : ''" viewBox="0 0 11.987 6.339"><path d="m14.167 9-4.584 3.929L5 9" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px" transform="translate(-3.59 -7.59)"/></svg>
    </button>
    <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-babyblue inset-x-0 bottom-0 pointer-events-none" x-show="more"></div>
    </div>
</div>