<template>
    <div>
        <div>
            <h3 class="text-2xl font-bold text-gray-800 mt-3 mb-4 text-right MvAamu">
                ފަހުގެ ޙަބަރުތަށް
            </h3>
        </div>

        <div class="flex justify-end">
        <!-- post cards -->
        <div class="w-full lg:w-2/3">
            <a
                v-for="story in recentStories"
                :key="story.id"
                class="block w-full lg:flex mb-10 shadow rounded-lg"
                href="#"
            >
               
                <div
                    class="bg-white rounded px-4 flex flex-col justify-between leading-normal"
                >
                    <div>
                        <div
                            class="mt-3 md:mt-0 text-gray-700 font-bold text-2xl mb-2 text-right MvAamu"
                            style="direction:rtl;"
                        >
                        އައްޑޫން މީހަކު ޕޮޒިޓިވްވެއްޖެ
                        </div>

                        <div class="flex items-center justify-end mt-1 mb-2">
                            <p
                                class="font-semibold text-gray-700 text-sm capitalize"
                                v-text="story.source.name"
                            >
                            </p>
                            <p class="text-gray-600 text-xs ml-1">
                                &mdash; {{story.published_date | moment("calendar")}}
                            </p>
                        </div>

                        <p class="text-gray-700 text-base text-right MvTyper" style="direction:rtl;">
                          ރާއްޖޭގައި ކޮވިޑްގެ ހާލަތު އިތުރަށް ގޯސްވަމުންދާއިރު ގިނަ ރަށްރަށުން ބަލި މީހުން ދަނީ ފެންނަމުންނެވެ.
                        </p>
                    </div>
                </div>

                 <div
                    class="h-48 lg:w-48 flex-none bg-cover text-center overflow-hidden opacity-75 rounded-lg"
                    style="background-image: url('https://images-01.avas.mv/post/big_RuM5p2M10OjKIYZf8SrS6aeHb.jpg')"
                    title="deit is very important"
                ></div>
            </a>
        </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "recent-stories",

    data() {
        return {
            recentStories: []
        };
    },

    mounted() {
        axios
            .get("api/recent")
            .then(response => {
                this.recentStories = response.data.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
};
</script>
