<script setup>
    import { defineProps } from 'vue';

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

    const articles = [
        { 
            headline: 'Taktikker som endret spillet vårt', 
            text: 'I denne grundige analysen utforsker vi de revolusjonerende taktikkene introdusert av treneren som fullstendig forvandlet vårt spill denne sesongen. Fra en defensiv holdning til en offensiv overmakt, dette er historien om hvordan vårt lag gikk fra under...',
            time: '17/03/2025',
            category: 'Spillstrategi'
        },
        { 
            headline: 'Støtte fra tribunen: Våre fantastiske fans', 
            text: 'Et hav av farger og sang fylte stadion, mens tilhengernes lidenskap og energi ga en ekstra "spiller" på banen. Vi dykker ned i hvordan supporterne våre har blitt en uunnværlig del av lagånden og ser på de mest minneverdige øyeblikkene fra tribunen denn...',
            time: '17/03/2025',
            category: 'Klubbliv'
        },
        { 
            headline: 'Hvor er de nå? Oppdateringer fra tidligere ENHET-spillere', 
            text: 'Livet etter å ha forlatt vårt kjære ENHET-lag kan ta mange vendinger. Vi tar et nostalgisk tilbakeblikk og oppdaterer deg på hvor tidligere stjernespillere har endt opp. Bli med på en reise gjennom karrierene deres etter ENHET, fra nye lag til personli...',
            time: '17/03/2025',
            category: 'Spillerfokus'
        }
    ];
</script>

<template>
    <section class="relative block w-full h-screen overflow-hidden">
        <div class="absolute inset-0 bg-cover" :style="{ backgroundImage: `url('${block.image}')` }"></div>
        <div class="absolute inset-0 bg-black opacity-80"></div>
        <div class="absolute p-12 w-full overflow-auto" style="top: 0; bottom: 0;">
            <div class="flex-row justify-center items-center">
                <h1 v-if="block.showtitle" class="text-center text-white font-arctic text-2xl md:text-4xl">{{ block.title || 'Tittel/Overskrift' }}</h1>
                <h2 v-if="block.showlabel" class="text-center text-amber-600 font-serif text-md md:text-xl">{{ block.label || 'Tittel Merkelapp' }}</h2>
            </div>

            <div class="mx-auto max-w-[1280px]">
                <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-12">
                    <!-- Begin news article loop -->
                    <div
                        v-for="(article, index) in articles"
                        :key="article.id"
                        class="news-article flex justify-normal items-start max-w-md"
                    >
                        <div class="flex-shrink-0">
                            <img class="h-48 w-32 object-cover border-2 border-amber-800 rounded-lg shadow-md" src="/img/blocks/nyheter_placeholder.jpg" alt="Eksempel bilde">
                        </div>
                        <div class="ml-4">
                            <h3 class="text-sm font-medium text-white font-arctic">
                                <Link href="#" class="hover:underline">
                                    {{ article.headline }}
                                </Link>
                            </h3>
                            <span class="mt-1 text-xs text-gray-500">{{ article.time }}</span>
                            <Link href="#" class="ml-4 bg-amber-100 hover:bg-amber-200 text-amber-800 text-xs font-semibold me-2 px-2.5 py-0.5 rounded border border-amber-400 inline-flex items-center justify-center">
                                {{ article.category }}
                            </Link>
                            <p class="mt-1 text-sm text-gray-300">
                                {{ article.text }}
                            </p>
                        </div>
                    </div>
                    <!-- End news article loop -->
                </div>
                <div class="mt-12 flex justify-end items-end">
                    <a href="#" class="font-arctic text-amber-600 hover:text-amber-400 no-underline hover:underline">{{ block.buttontext || 'Vis mer' }}</a>
                </div>
            </div>
        </div>
    </section>
</template>