<template>
    <div class="container">
        <div class="row row-cols-3 py-3 justify-content-evenly">
            <MenuCard v-for="recipe in recipes" :key="recipe.id" :recipe="recipe" @favorite-updated="getSearchResults"
                :source="source_tag" />
        </div>

    </div>
</template>
  
<script>
import api from "@/api";
import MenuCard from '../components/MenuCard.vue';

export default {
    data() {
        return {
            recipes: [],
            source_tag: 'search_result'
        };
    },
    mounted() {
        this.getSearchResults();
    },
    methods: {
        async getSearchResults() {
            const keyword = this.$route.query.keyword;

            await api
                .get(`/recipes/search?keyword=${keyword}`)
                .then(response => {
                    this.recipes = response.data;
                })
                .catch(error => {
                    console.error(error);
                });
        },
    },
    watch: {
        '$route.query.keyword'(newKeyword) {
            this.getSearchResults();
        }
    },
    components: {
        MenuCard,
    },
};
</script>
  