---
import client from "@/data/pocketbase";

const { ingredients, class: className } = Astro.props;

const ings = await Promise.all(
    ingredients.map(async i => await client.collection("ingredients").getOne(i))
)
---

<div class={className}>
    {ings.map(i => (
        <div class="text-sm">
            <p>• {i.quantity} {i.unit || " "}  {i.name}</p>
        </div>
    ))}
</div>