import { Suspense } from 'react';
import MultiBillEditPage from './MultiBillEditPage';
import { Main } from '@/app/ui/Main';

const MultiBillEditSkeleton = () => (
    <div className="flex min-h-screen flex-col items-center justify-center p-6 bg-base-300">
        <span className="loading loading-spinner loading-lg"></span>
        <p className="mt-4">Loading...</p>
    </div>
);

export default async function Page({ params }: { params: { year: string; month: string } }) {

    return (
        <Main>
            <Suspense fallback={<MultiBillEditSkeleton />}>
                <MultiBillEditPage year={parseInt(params.year)} month={parseInt(params.month)} />
            </Suspense>
        </Main>
    );
}