import { Suspense } from 'react';
import { fetchSubscriptions } from '@/network/apis/dashboard/subscriptions/subscriptions.apis';
import { SubscriptionsList } from './components/subscriptionsList/subscriptionsList';

export const dynamic = 'force-dynamic';

type PageProps = { searchParams?: Promise<{ page?: string }> };

const SubscriptionPage = async ({ searchParams }: PageProps) => {
  const sp = await searchParams;
  const page = Number(sp?.page ?? 1);

  const subscriptionsList = await fetchSubscriptions({ page, perPage: 10 });

  return (
    <Suspense fallback={<div>Loading packages...</div>}>
      <SubscriptionsList subscriptions={subscriptionsList} />
    </Suspense>
  );
};

export default SubscriptionPage;