<template>
    <div class="w-full flex flex-col justify-center items-center lg:p-0 p-4">
        <div class="lg:text-[78px] text-[36px] text-[#242424] font-bold mt-8">Blog</div>
        <div class="lg:w-[1000px] flex flex-col lg:pl-[100px] lg:pr-[100px] pt-10 pb-10">
            <div style="box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);" 
            @click="blogTap(index)"
            class="shadow-lg lg:p-6 p-4 bg-white rounded-lg lg:pl-20 lg:pr-20 pl-4 pr-4  lg:mt-10 mt-4 flex flex-col hover:opacity-50" v-for="(value,index) in titList">
                <span class="text-[#333333] lg:text-[32px] text-[20px] text-center">{{value}}</span>
                <span class="text-[#003366] text-[13px] text-center">Lanjutkan membaca</span>
            </div>
        </div>
    </div>
</template>


<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()

const titList = [
    "Mengenal Kota Thaif: Kota Sejuk di Balik Pegunungan Hijaz",
    "🚨 Banyak Orang Nggak Tahu, Ini Waktu terbaik untuk Umroh!",
    "1 Hari Puasa = Dosa 710 Hari Terhapus? Inilah Penjelasan Lengkapnya",
    "Bunda, Mau Umroh Saat Hamil? WAJIB Tahu 5 Hal Penting Ini!",
    "Cara Agar Bisa Berhaji: Ikhtiar dan Ibadah Menuju Baitullah",
    "TAKUT UMROH KARENA BANYAK DOSA?",
    "Cara Menghindari Jet Lag Saat Perjalanan Haji dan Umroh",
    "Jangan Cuma Jadi RAMADHANIYYUN",
    "Malam Lailatul Qadar: Keutamaan, Tanda-Tanda, dan Amalan Berdasarkan Dalil Shahih",
    "Jangan Skip Tarawih! Ini Alasan Kenapa Kamu Bakal Rugi Berat!",
    "Wajib Dipahami, Inilah Perbedaan dari Haji Furoda dan Haji Plus",
    "Faktor Pertimbangan untuk Memilih Jenis Haji yang Akan Dilaksanakan",
]

const blogTap = (index) => {
    if(index == 0){
        router.push({path:'/blog1'})
    }
    if(index == 1){
        router.push({path:'/blog2'})
    }
    if(index == 2){
        router.push({path:'/blog3'})
    }
    if(index == 3){
        router.push({path:'/blog4'})
    }
    if(index == 4){
        router.push({path:'/blog5'})
    }
    if(index == 5){
        router.push({path:'/blog6'})
    }
    if(index == 6){
        router.push({path:'/blog7'})
    }
    if(index == 7){
        router.push({path:'/blog8'})
    }
    if(index == 8){
        router.push({path:'/blog9'})
    }
    if(index == 9){
        router.push({path:'/blog10'})
    }
    if(index == 10){
        router.push({path:'/blog11'})
    }
    if(index == 11){
        router.push({path:'/blog12'})
    }
}
</script>