---
import client from "@/data/pocketbase";
import SiteLayout from "@/layouts/base";
import ImageCarousel from "@/components/Detail/ImageCarousel";
import IngredientTableView from "@/components/Detail/IngredientTableView";
import StepView from "@/components/Detail/StepView";
import InfoView from "@/components/Detail/InfoView";

const { recipeid } = Astro.params;

const re = await client.collection("recipes").getOne(recipeid ?? "0");

const stepIds = re.steps

let steps = await Promise.all(
    stepIds.map(async s =>
        await client.collection("steps").getOne(s)
    )
)

steps = steps.sort((a, b) => a.index - b.index);

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

<SiteLayout>
    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
        <div class="flex flex-col mt-2 md:mt-4 sticky">
            <ImageCarousel class="w-full" recipe={re} />
            <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>

            <!-- Details -->
            <InfoView re={re} />

            <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
        </div>
        
        <div class="flex w-full flex-col">
            <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>

            <!-- Steps -->
            <StepView steps={steps} />
        </div>

    </div>
</SiteLayout>