<template>
    <div class="row" id="recipe-title">
        <div class="col-4 me-3" style="width: 28rem; height: 25rem">
            <img :src="recipe.image_url" :alt="recipe.title" class="rounded"
                style="width: 100%; height: 100%; object-fit: cover;">
        </div>
        <div class="col">
            <h1 class="display-6 pt-3">{{ recipe.title }}</h1>
            <span>Sumber: <a :href="recipe.source_url">masakapahariini</a></span>
            <div class="row my-4">
                <div class="level col-4 py-3 text-center">
                    <i class="fa-solid fa-book-open-reader fa-2xl"></i>
                    <span class="d-block mt-3">{{ recipe.difficulty }}</span>
                </div>
                <div class="time col-4 py-3 text-center border-start border-secondary">
                    <i class="fa-solid fa-clock fa-2xl"></i>
                    <span class="d-block mt-3">{{ recipe.time }} minutes</span>
                </div>
                <div class="portion col-4 py-3 text-center border-start border-secondary">
                    <i class="fa-solid fa-people-group fa-2xl"></i>
                    <span class="d-block mt-3">{{ recipe.servings }} portion</span>
                </div>
            </div>
            <div class="row px-3 mt-5">
                <a class="col btn btn-primary rounded-pill fw-bold text-light" :href="'#recipe-ingredients'">
                    Cook Now
                </a>
                <div class="col-2">
                    <FavoriteButton v-if="isLoggedIn" :recipeId="recipe.id" :isFavorited="recipe.is_favorited"
                        :source="source" @click.stop @favorite-updated="$emit('favorite-updated')" />
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import FavoriteButton from './FavoriteButton.vue';
import { isUserLoggedIn } from "@/utils/token.js";

export default {
    props: {
        recipe: {
            type: Object,
            required: true,
        },
        source: {
            type: String
        },
    },
    computed: {
        isLoggedIn() {
            return isUserLoggedIn();
        },
    },
    components: {
        FavoriteButton
    },
};
</script>
  