<template>
    <div class="favorite">
        <form @submit.prevent="submitForm">
            <button type="submit" class="btn btn-light rounded-circle border shadow shadow-md text-center"
                style="height:40px;width:40px">
                <i :class="heartIcon"></i>
            </button>
        </form>
    </div>
</template>
  
<script>
import api from "@/api";

export default {
    props: {
        recipeId: {
            type: Number,
            required: true,
        },
        isFavorited: {
            type: Boolean,
            required: true,
        },
        source: {
            type: String
        }
    },
    computed: {
        heartIcon() {
            return this.isFavorited ? 'fa-solid fa-heart text-primary' : 'fa-regular fa-heart text-primary';
        },
    },
    methods: {
        async submitForm() {
            try {
                const favoriteData = {
                    source: this.source,
                }

                if (!this.isFavorited) {
                    await api.post(`/profiles/favorites/${this.recipeId}/`, favoriteData);
                } else {
                    await api.delete(`/profiles/favorites/${this.recipeId}/`);
                }
                this.$emit('favorite-updated');
            } catch (error) {
                console.error(error.response.data);
            }
        },
    },
};
</script>
  