export default {
	setup() {
		const { ref, computed } = Vue;

		const recipes = ref(null);

		fetch("https://hub.xpub.nl/soupboat/cookbook/get")
			.then((res) => res.json())
			.then((data) => (recipes.value = data));

		const style = function (index) {
			return {
				transform: `translate(${index * 10}px, ${index * 10}px)`,
			};
		};

		const browse = function () {
			let recipe = recipes.value.pop();
			recipes.value.unshift(recipe);
		};

		return { recipes, style, browse };
	},

	template: ` 
    <div class="cookbook">
        <section class="recipe" v-for="(recipe, index) in recipes" :style="style(index)" @click="browse()">
			<h3>{{recipe.title}}</h3>
			<p>{{recipe.description}}</p>
			<div>{{recipe.nature}}</div>
			<ol>
				<li v-for="log in recipe.logs">{{log}}</li>
			</ol>
			<p>{{recipe.who}}</p>
		</section>
    </div>
    `,
};