<script setup>
    import { onMounted, ref, toRef, watch } from 'vue';
    import { initFlowbite } from 'flowbite';

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

    const clubName = ref(null);

    const props = defineProps({
        block: { type: Object, required: true }
    });

    const emit = defineEmits(['update:block']);
    const local = toRef(props, 'block');

    watch(local, (val) => emit('update:block', val), { deep: true });
</script>

<template>
    <header id="frontPageHeader" 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>