import { AdminArticleList } from '@/ui/components/internal/article/admin-article-list';
import { AdminArticleListSkeleton } from '@/ui/components/internal/article/admin-article-list-skeleton';
import { Button } from '@/ui/components/shadcn/button';
import { PlusIcon } from 'lucide-react';
import Link from 'next/link';
import { Suspense } from 'react';

const PAGE_SIZE = 6;

interface AdminPageProps {
    searchParams: Promise<{ page?: string; pageSize?: string }>;
}

const AdminPage = async ({ searchParams }: AdminPageProps) => {
    return (
        <div className='container mx-auto px-4 py-10 min-h-3/4'>
            <div className='mb-8 flex items-center justify-between border-b border-border pb-6'>
                <h1 className='text-2xl font-bold'>Articles</h1>
                <Button asChild>
                    <Link href='/admin/article/create'>
                        <PlusIcon className='size-4' />
                        Create Article
                    </Link>
                </Button>
            </div>
            <Suspense
                fallback={<AdminArticleListSkeleton skeletonSize={PAGE_SIZE} />}
            >
                <AdminArticleList
                    searchParams={searchParams}
                    defaultPageSize={PAGE_SIZE}
                />
            </Suspense>
        </div>
    );
};

export default AdminPage;