import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
import CreateEvent from "./create-event"
import CreateRatePlan from "./create-rate-plan"
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
import { observer } from "mobx-react-lite"

interface Props {
    mainState: PricePlanDetailState
    formState: RatePlanFormState
}
const RatePlanFlow = observer( ({mainState, formState}: Props) => {
    if(mainState.getFlow() >= 2) return null

    return (
        <section className={`flex gap-12 justify-center items-center ${mainState.getFlow() ? "col-span-9" : "col-span-12"}`}>
            {/* Step 1 */}
            <CreateEvent mainState={mainState} />
            {/* Step 2 */}
            <CreateRatePlan mainState={mainState} formState={formState} />
        </section>
    )
})

export default RatePlanFlow