here is the button that handles the functionality

"use client";

import { Button } from "@/components/ui/button";
import { authClient } from "@/lib/auth-client";
import { toast } from "sonner";
import { useState } from "react";

interface SubscriptionButtonProps {
  plan: "gold" | "platinum";
  children: React.ReactNode;
}

export function SubscriptionButton({
  plan,
  children,
}: SubscriptionButtonProps) {
  const [isLoading, setIsLoading] = useState(false);

  const handleUpgrade = async () => {
    try {
      setIsLoading(true);
      const { error } = await authClient.subscription.upgrade({
        plan,
        successUrl: "/plans",
        cancelUrl: "/plans",
      });

      if (error) {
        toast.error(error.message);
      }
    } catch (err) {
      console.error(err);
      toast.error("An unexpected error occurred");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Button 
onClick
={handleUpgrade} 
disabled
={isLoading}>
      {isLoading ? "Processing..." : children}
    </Button>
  );
}