"use client";
import { Loader2 } from "lucide-react";
import { api } from "@/lib/trpc/client";
import { PlanType } from "@/server/modules/payment/types/plan-type.enum";
import TariffList from "./tariff-list";

export default function BussinessPlans() {
    const {
        isLoading,
        data: plan
    } = api.payment.plan.get.useQuery({
        with: ["prices"],
        type: PlanType.BUSINESS
    });

    return (
        <div className="mx-auto my-10">
            {isLoading && (
                <div className="flex justify-center items-center h-full">
                    <Loader2 className="animate-spin" />
                </div>
            )}

            {!isLoading && plan && (
                <TariffList plan={plan} />
            )}
        </div>
    );
}