---
import { record } from "astro:schema"
import client from "@/data/pocketbase"
import StepIngredientSideView from "./StepIngredientSideView.astro"

const { steps, class: className } = Astro.props
---

<div class={className}>
    <p class="text-[22pt] font-bold md:hidden">Steps</p>
    { steps.map(s => (
        <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
            <p class="text-bold text-[10pt]">Step {s.index + 1}</p>
            
            <div class="flex flex-col md:flex-row md:items-stretch">
                <p class="w-full md:flex-2/3 pr-1 text-left">{s.instruction}</p>
                {s.ingredients && s.ingredients.length > 0 && (
                    <div class="w-full md:w-auto md:flex-2/5 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
                        <StepIngredientSideView class="text-left" ingredients={s.ingredients} />
                    </div>
                )}
            </div>
        </div>
    )) }
</div>