"use client";
import React from "react";
import Link from "next/link";
import { Routes } from "@/config/routes";
import { Button } from "@/components/ui/button";
import { PriceList } from "@/components/dashboard/payment/price-list";
import type { AppRouterOutput } from "@/lib/trpc/router";
import { Edit } from "lucide-react";

type Plan = NonNullable<AppRouterOutput["payment"]["plan"]["get"]>;

type Props = {
    plan: Plan;
};

export const PlanView: React.FC<Props> = ({ plan }) => {
    return (
        <div className="flex flex-col gap-6">
            <div className="flex items-center justify-between px-4">
                <div>
                    <h1 className="text-2xl font-bold">{plan.name}</h1>
                    <p className="text-muted-foreground">{plan.type}</p>
                </div>
                <Button asChild>
                    <Link href={Routes.DASHBOARD.PAYMENT_PLAN_EDIT(plan.id)}>
                        <Edit className="mr-2 size-4" />
                        Edit Plan
                    </Link>
                </Button>
            </div>

            <div className="px-4">
                <h2 className="mb-4 text-xl font-semibold">Prices</h2>
                <PriceList planId={plan.id} />
            </div>
        </div>
    );
};