@props(['yOffset' => '20', 'delay' => '0', 'duration' => '1000', 'class' => ''])

<div
    x-data="{
        show: false,
        yOffset: {{ $yOffset }},
        delay: {{ $delay }},
        duration: {{ $duration }}
    }"
    x-init="
        // Wait for Alpine to be initialized
        $nextTick(() => {
            // Create intersection observer
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        // Add delay if specified
                        setTimeout(() => {
                            show = true;
                        }, delay);
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1 // Trigger when 10% of the element is visible
            });
            
            // Start observing this component
            observer.$el = $el;
            observer.observe($el);
            
            // Cleanup
            return () => observer.disconnect();
        })
    "
    x-bind:style="`transition: transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${duration}ms cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(${show ? '0' : yOffset + 'px'}); opacity: ${show ? 1 : 0};`"
    class="transition-all {{ $class }}"
    {{ $attributes }}>
    {{ $slot }}
</div>