<script>

    import BottomBorder from "$lib/components/shared/BottomBorder.svelte";
    import ViewAllButton from "$lib/components/shared/ViewAllButton.svelte";
    import TopBorder from "$lib/components/shared/TopBorder.svelte";
    import {locale, t} from '$lib/translations.js'
    import { inView } from '$lib/config/inView';
</script>
<section use:inView class="news to-blue-950 from-blue-900 bg-gradient-to-b pt-20 px-4 lg:px-0 -mt-1" style="direction: ltr;">

    <div>

        <div class="max-w-6xl flex ltr:flex-row rtl:flex-row-reverse items-right justify-end m-auto h-2 ">

        <ViewAllButton label="{$t('common.read-all')}" link="/" bgColor="bg-white" iconColor="bg-sky-400"/>


    </div>
    <div class="max-w-6xl flex flex-col  m-auto h-14 ">

        <TopBorder title="{$t('common.domestic')}" textColor="text-white"/>


    </div>

    <div class="max-w-6xl m-auto grid grid-cols-1 lg:grid-cols-3 gap-4 lg:h-96   {$locale !== 'en-US' ? 'direction-rtl' : ''}">

        <div class="h-96 lg:h-full flex  bg-[url('/img/news/8.jpg')]  bg-cover bg-center">

            <div class="relative h-full bg-blue-gradiant bg-cover bg-center flex flex-col justify-end  ">

                <div class="flex flex-row px-4 justify-between text-white text-[12px]">
                    <div class="flex flex-row rounded items-center px-2">

                        <span class="uppercase text-sm font-bold">Grade I</span>
                    </div>

                    <div class="flex flex-row items-center space-x-2 ">

                        <span class="">15 JUL 2023</span>
                    </div>
                </div>

                <div>
                    <p class="text-white text-xl my-4 mx-4 font-bold line-clamp-2">
                        Kandahar Start with a Bang Kochian and Kunduz Find Victories sfasa sdlfj aslkdj kda kasf lsdeas
                        alsd as ad
                    </p>
                </div>


            </div>

        </div>
        <div class="h-96 lg:h-full  bg-[url('/img/news/9.jpg')]  bg-cover bg-center">

            <div class="relative h-full bg-blue-gradiant bg-cover bg-center flex flex-col justify-end  ">

                <div class="flex flex-row px-4 justify-between text-white text-[12px]">
                    <div class="flex flex-row rounded items-center px-2">

                        <span class="uppercase text-sm font-bold">INTERNATIONAL</span>
                    </div>

                    <div class="flex flex-row items-center space-x-2 ">

                        <span class="">17 JUL 2023</span>
                    </div>
                </div>


                <div>
                    <p class="text-white text-xl my-4 mx-4 font-bold line-clamp-2">
                        Paktia and Nangarhar B Advance to Grade One Tournament 2022

                    </p>
                </div>


            </div>

        </div>

        <div class="h-96 lg:h-full  bg-[url('/img/news/10.jpg')]  bg-cover bg-center">

            <div class="relative h-full bg-blue-gradiant bg-cover bg-center flex flex-col justify-end  ">

                <div class="flex flex-row px-4 justify-between text-white text-[12px]">
                    <div class="flex flex-row rounded items-center px-2">

                        <span class="uppercase text-sm font-bold">Domestic</span>
                    </div>

                    <div class="flex flex-row items-center space-x-2 ">

                        <span class="">19 JUL 2023</span>
                    </div>
                </div>

                <div>
                    <p class="text-white text-xl my-4 mx-4 font-bold line-clamp-2">
                        Bowlers Shine on Day 5 as Ghazni, Parwan and Nooristan Register Wins

                    </p>
                </div>


            </div>

        </div>


    </div>


    <BottomBorder bgColor="bg-blue-950"/>
    </div>
</section>