---
import * as memorium from "@helpers/memorium";
import { markdownToHtml } from "@helpers/markdown";
import Image from "@components/Image.astro";
import type { ImageMetadata } from "astro";

const { resource } = Astro.props
const ingredients = resource?.content?.recipeIngredient || [];
const instructions = resource?.content?.recipeInstructions || [];
---

<h1 class="text-4xl">{resource?.content?.name}</h1>
<div>
  {resource?.content?.image && <Image hash src={{src: memorium.getImageUrl(resource.content.image)} as ImageMetadata} alt="Cover for {resource?.content?.name}" class="rounded-2xl overflow-hidden" pictureClass="rounded-2xl" />}
</div>
<p>{resource?.content?.description}</p>
<h2 class="text-2xl">Ingredients</h2>
<ul>
  {
    ingredients.map((ingredient) => (
      <li set:html={markdownToHtml(ingredient)}/>
    ))
  }
</ul>

<h2 class="text-2xl">Steps</h2>
<ol>
  {
    instructions.map((ingredient) => (
      <li set:html={markdownToHtml(ingredient)}/>
    ))
  }
</ol>