import { Suspense } from 'react';
import { fetchPackages } from '@/network/apis/dashboard/packages/packages.apis.';
import PackagesContainer from '../../../../modules/packages';

export const dynamic = 'force-dynamic';

const PackagesPage = async ({
  searchParams,
}: {
  searchParams?: Promise<{ page?: string }>;
}) => {
  const resolvedParams = await searchParams;
  const page = Number(resolvedParams?.page ?? 1);
  const packagesList = await fetchPackages(page);

  return (
    <Suspense fallback={<div>Loading packages...</div>}>
      <PackagesContainer
        packages={packagesList?.items || []}
        pagination={packagesList?.pagination}
      />
    </Suspense>
  );
};

export default PackagesPage;