<script>
    import ViewAllButton from "$lib/components/shared/ViewAllButton.svelte";
    import TopBorder from "$lib/components/shared/TopBorder.svelte";
    // import GalleryIcon from "svelte-material-icons/Camera.svelte"
    // import { Camera } from "@iconify/svelte";
    import Icon from "@iconify/svelte";
    import {t, locale} from "$lib/translations.js";
    import { inView } from '$lib/config/inView';
</script>

<section use:inView class="news from-blue-950 to-sky-600 bg-gradient-to-b pt-20 px-4 lg:px-0 -mt-1" style="direction: ltr;">
    <div></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.view-all')}" link="/" bgColor="bg-white" iconColor="bg-sky-500"/>


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

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


    </div>

    <div class="max-w-6xl m-auto grid grid-cols-1 lg:grid-cols-3 gap-4 lg:h-96">

        <div class="h-96 lg:h-full {$locale !== 'en-US' ? 'direction-rtl' : ''}">
            <div class="bg-[url('/img/news/8.jpg')]  bg-cover bg-center h-[70%] pt-2">
                <div class="flex flex-row rounded-lg items-center  bg-sky-500 justify-center w-14 px-2 text-white mx-2">


                    <div class="flex flex-row items-center">
                        <Icon icon="mdi:camera"  class="pl-1 text-xl"/>
                    </div>

                    <span class="pr-1 text-lg ml-1">
                            34
                    </span>

                </div>
            </div>

            <div class=" flex flex-col justify-end bg-blue-950 ">

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


                </div>

                <div>
                    <p class="text-white text-xl py-4 px-4 font-bold">
                        Kandahar Start with a Bang Kochian
                    </p>
                </div>


            </div>

        </div>
        <div class="h-96 lg:h-full  {$locale !== 'en-US' ? 'direction-rtl' : ''}">
            <div class="bg-[url('/img/news/8.jpg')]  bg-cover bg-center h-[70%] pt-2">
                <div class="flex flex-row rounded-lg items-center  bg-sky-500 w-14 px-2 text-white mx-2 justify-center">


                    <div class="flex flex-row items-center">
                        <Icon icon="mdi:camera"  class="pl-1 text-xl"/>
                    
                    </div>
                     <span class="pr-1 text-lg ml-1">
                            54
                        </span>

                </div>
            </div>

            <div class=" flex flex-col justify-end bg-blue-950 ">

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


                </div>

                <div>
                    <p class="text-white text-xl py-4 px-4 font-bold">
                        Kandahar Start with a Bang Kochian
                    </p>
                </div>


            </div>

        </div>
        <div class="h-96 lg:h-full  {$locale !== 'en-US' ? 'direction-rtl' : ''}">
            <div class="bg-[url('/img/news/8.jpg')]  bg-cover bg-center h-[70%] pt-2">
                <div class="flex flex-row rounded-lg items-center  bg-sky-500 justify-between w-14 px-2 text-white mx-2">


                    <div class="flex flex-row items-center">
                        <Icon icon="mdi:camera"  class="pl-1 text-xl"/>
                    </div>
                    <span class="pr-1 text-lg ml-1">
                            12
                        </span>
                        

                </div>
            </div>

            <div class=" flex flex-col justify-end bg-blue-950 ">

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


                </div>

                <div>
                    <p class="text-white text-xl py-4 px-4 font-bold">
                        Kandahar Start with a Bang Kochian
                    </p>
                </div>


            </div>

        </div
        >


    </div>
</section>