---
import { Recipe } from "@tmlmt/cooklang-parser"
import { authPB } from "@data/pb";
import RecipeCard from "@component/index/card"
import Base from "@layout/Base";
import { record } from "astro:schema";

const pb = await authPB()
const records = await pb.collection('recipes').getFullList()

const recipes = records.map(r => new Recipe(r.cooklang))
const ids = records.map(r => r.id)
const images = await Promise.all(
	records.map(r => pb.files.getURL(r, r.images[0])) // get first image from each recipe as a cover image
)
---

<Base>
	{
		recipes.map((r, i) => (
			<RecipeCard
				id={ids[i]}
				title={r.metadata.title ?? "Untitled Recipe"}
				description={r.metadata.description ?? "No Description"}
				tags={r.metadata.tags ?? []}
				image={images[i]}
			/>
		))
	}
</Base>