"use client"

import QueryWrapper from "@/components/module/query-wrapper"
import PricePlanDetailViewModel from "../view-model"
import RatePlanDialog from "./dialog/rate-plan-dialog"
import UsageEventDialog from "./dialog/usage-event-dialog"
import PricePlanTab from "./tab"
import PricePlanHeader from "./header"
import { observer } from "mobx-react-lite"

interface Props {
    id: string
}

const Content = observer(({
    id
}: Props) => {
    // Server State
    const vm = new PricePlanDetailViewModel()
    console.log(id, 'cek id');
    

    return (
        <div>
            <PricePlanHeader mainState={vm.getMainState()}/>
            <PricePlanTab vm={vm}/>
            <UsageEventDialog options={vm.getUsageEventOptions()} mainState={vm.getMainState()}/>
            <RatePlanDialog vm={vm}/>
        </div>
    )
})

const PricePlanDetail = ({id}: {id:string}) => {
    return (
        <QueryWrapper>
            <Content id={id}/>
        </QueryWrapper>
    )
}

export default PricePlanDetail