<script setup>
    import { Link } from '@inertiajs/vue3';
    import { onMounted, ref, defineProps } from 'vue';
    import { gsap } from 'gsap';
    import { initFlowbite } from 'flowbite';

    const { block, blockData, frontpage } = defineProps({
        block: {
            type: Object,
            required: true,
        },
        blockData: {
            type: Object,
            default: () => ({})
        },
        frontpage: {
            type: Boolean
        }
    });

    onMounted(() => {
        initFlowbite();
        animateLogo();
    });

    const clubName = ref(null);

    /**
     * Club logo animation in the header
     */
    

    function animateLogo() {
        const text = clubName.value.textContent.trim();
        const chars = Array.from(text);

        // Clear the text content and create a span for each character
        clubName.value.textContent = '';
        chars.forEach((char) => {
            const span = document.createElement('span');
            span.textContent = char;
            clubName.value.appendChild(span);
        });

        const logoTimeline = gsap.timeline({ defaults: { ease: 'power1.out' } });

        // Animate each letter
        logoTimeline.from(clubName.value.children, {
            duration: 0.5,
            opacity: 0,
            y: 20,
            stagger: 0.05,
        });

        // Start fading in the logo before the text animation completes
        logoTimeline.to("#clubLogo", {
            duration: 1,
            opacity: 1,
        }, "-=0.5");
    }
</script>

<template>
    <header :id="block.anchorName" class="h-[400px] bg-heroBg bg-no-repeat bg-center bg-cover">
        <div class="h-[400px] bg-heroSoldiers bg-no-repeat bg-bottom z-0">
            <div class="h-[400px] bg-heroFgR bg-repeat-x bg-bottom z-10">
                <div class="flex items-end justify-center content-end pt-12">
                    <Link id="logoHeader" :href="route('forsiden')" class="flex justify-center items-center p-2">
                        <img id="clubLogo" src="/img/oms-glow.png" class="w-14 md:w-20 lg:w-28 mr-2 md:mr-6 shadow-2xl" alt="">
                        <p class="text-white text-2xl md:text-4xl lg:text-6xl font-topsecret">
                            <span ref="clubName">{{ block.title || 'Østfold Milsim' }}</span>
                        </p>
                    </Link>
                </div>
            </div>
        </div>
    </header>
</template>