---
import Layout from "@layouts/Layout.astro";
import { useTranslatedPath } from "@i18n/utils";
import markdownToText from "@helpers/markdownToText";
import * as memorium from "@helpers/memorium";

const path = useTranslatedPath(Astro.url);

const collection = "resources/Recipes";

export async function getStaticPaths() {
  const recipes = await memorium.listResource("Recipes");

  const paths = recipes.content.filter(res =>res.content).map((recipe: any) => {
    return {
      params: {
        recipeName: recipe.name.replace(/\.md$/, ""),
      },
    };
  });

  return paths;
}

const recipeResponse = await memorium.listResource(
  //@ts-ignore
  `Recipes/${Astro.params.recipeName}.md`,
);
if (!recipeResponse?.content) {
  return new Response(null, {
    status: 404,
    statusText: "Not found",
  });
}
const recipe = recipeResponse.content;
---

<Layout title="Max Richter">
  <div class="top-info flex items-center place-content-between m-y-2">
    <a class="flex items-center gap-1 opacity-50" href={path("/" + collection)}>
      <span class="i-tabler-arrow-left"></span> back
    </a>
    <div class="date opacity-50">
      {
        recipe.date?.toLocaleString("en-US", {
          month: "long",
          day: "numeric",
          year: "numeric",
        })
      }
    </div>
  </div>

  <h1>{recipe.name}</h1>

  <h3>Ingredients</h3>
  <ul>
    {
      recipe.recipeIngredient?.map((ingredient: any) => (
        <li>{markdownToText(ingredient??"")}</li>
      ))
    }
  </ul>

  <h3>Instructions</h3>
  <ol>
    {
      recipe.recipeIngredient?.map((ingredient: any) => (
        <li>{markdownToText(ingredient??"")}</li>
      ))
    }
  </ol>
</Layout>