'use client';

import React, { useState, useEffect } from 'react';
import Pricing from '@/components/Pricing';
import { useRouter } from 'next/navigation';
import { useAuthContext } from '@/providers/AuthProvider';

export default function PricingPage() {
    const router = useRouter();
    const { user } = useAuthContext();

    const [plans, setPlans] = useState([]);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        fetch('/api/plans', { cache: 'no-store' })
            .then(res => res.json())
            .then(data => {
                setPlans(data);
                setIsLoading(false);
            })
            .catch(err => {
                console.error(err);
                setIsLoading(false);
            });
    }, []);

    return (
        <Pricing
            plans={plans}
            isLoading={isLoading}
            currentPlan={user?.subscription.plan || 'free'}
            onBack={() => router.push(user ? '/dashboard' : '/')}
            onSelectPlan={() => router.push(user ? '/checkout' : '/login')}
        />
    );
}
