<template>
    <div class="border-b">
        <div>
            <h2 class="text-center text-2xl font-bold text-gray-800 MvAamu">
               ތަފާތު މައުޟޫޢުތައް
            </h2>
        </div>

        <div class="flex flex-wrap justify-center">
            <a
                v-for="topic in topics"
                :key="topic.id"
                href="#"
                class="text-sm font-medium border border-gray-700 py-1 px-3 rounded-full text-grey-500 mr-2 mt-2 mb-4 hover:bg-green-100"
                v-text="topic.name"
            ></a>
        </div>
    </div>
</template>

<script>
export default {
    name: "discover-topics",
    data() {
        return {
            topics: []
        };
    },

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