'use client';

import { client } from '@/lib/auth/auth-client';
import { useState, ReactNode } from 'react';
import { Loader2 } from 'lucide-react';
import { toast } from 'sonner';

interface SubscriptionButtonProps {
  planName: string;
  children: ReactNode;
  className?: string;
}

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

  const handleSubscribe = async () => {
    if (!client.subscription) {
      toast.error('Subscription service not available');
      return;
    }

    setIsLoading(true);

    try {
      const result = await client.subscription.upgrade({
        plan: planName,
        successUrl: `${window.location.origin}/payments/success`,
        cancelUrl: `${window.location.origin}/payments/personal`
      });

      if (result.error) {
        toast.error(result.error.message || 'Failed to start subscription');
        return;
      }

      if (result.data?.url) {
        window.location.href = result.data.url;
      }
    } catch {
      toast.error('An error occurred while starting your subscription');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <button
      onClick={handleSubscribe}
      disabled={isLoading}
      className={className}
    >
      {isLoading ? (
        <Loader2 className="animate-spin" />
      ) : (
        children
      )}
    </button>
  );
}