import { FC, Suspense } from 'react';
import { Main } from '@/app/ui/Main';
import HomePage from '@/app/ui/HomePage';
import { MonthCardSkeleton } from '@/app/ui/MonthCardSkeleton';

export interface PageProps {
  searchParams?: {
    year?: string;
    month?: string;
  };
}

const HomePageSkeleton = () => 
<>
  <MonthCardSkeleton checked={true} />
  <MonthCardSkeleton />
  <MonthCardSkeleton />
</>

const Page:FC<PageProps> = async ({ searchParams }) => {

 return (
    <Main>
      <Suspense fallback={<HomePageSkeleton />}>
        <HomePage searchParams={searchParams} />
      </Suspense>
    </Main>
  );
}

export default Page;