import { TabsContent } from "@/components/ui/tabs"
import { OptionProps } from "@/lib/helper/type"
import UsageEvents from "./usage-events"
import RatePlanFlow from "./flow"
import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
import RatePlanSection from "./rate-plan"
import { observer } from "mobx-react-lite"

interface Props {
    usageEventOptions: OptionProps[]
    mainState: PricePlanDetailState
    formState: RatePlanFormState
}

const TabsUsageContent = observer(({
    usageEventOptions,
    mainState,
    formState
}: Props) => {
    return (
        <TabsContent value="usage" className="m-0">
            <div className="grid grid-cols-12 min-h-[50vh]">
                <UsageEvents eventOptions={usageEventOptions} mainState={mainState}/>
                <RatePlanFlow mainState={mainState} formState={formState}/>
                <RatePlanSection mainState={mainState} ratePlanFormState={formState}/>
            </div>
        </TabsContent>
    )
})

export default TabsUsageContent