<script setup>

import MenuCard from '../../components/MenuCard.vue';

</script>

<template>
    <div class="container my-4">
        <h2 class="text-center fw-bolder">Favorited Recipes</h2>
        <div class="row row-cols-3 py-3 justify-content-evenly">
            <MenuCard v-for="recipe in recipes" :key="recipe.id" :recipe="recipe" :source="source_tag"
                @favorite-updated="fetchRecipes" />
        </div>
    </div>
</template>

<script>
import api from '@/api'

export default {
    data() {
        return {
            recipes: [],
            source_tag: "favorite"
        };
    },
    mounted() {
        this.fetchRecipes();
    },
    methods: {
        async fetchRecipes() {
            try {
                const response = await api.get('/profiles/favorites/');
                this.recipes = response.data;
            } catch (error) {
                console.error(error);
            }
        },
    },
    components: {
        MenuCard,
    },
};
</script>