export const ArticleCardSkeleton = () => (
    <div className='flex flex-col overflow-hidden rounded-xl border border-border bg-card'>
        <div className='aspect-video w-full animate-pulse bg-muted' />
        <div className='flex flex-1 flex-col gap-3 p-5'>
            <div className='h-3 w-24 animate-pulse rounded bg-muted' />
            <div className='space-y-1.5'>
                <div className='h-4 w-full animate-pulse rounded bg-muted' />
                <div className='h-4 w-3/4 animate-pulse rounded bg-muted' />
            </div>
            <div className='flex-1 space-y-1.5'>
                <div className='h-3 w-full animate-pulse rounded bg-muted' />
                <div className='h-3 w-full animate-pulse rounded bg-muted' />
                <div className='h-3 w-2/3 animate-pulse rounded bg-muted' />
            </div>
            <div className='mt-1 h-3 w-16 animate-pulse rounded bg-muted' />
        </div>
    </div>
);

export const ArticleListSkeleton = ({
    skeletonSize,
}: {
    skeletonSize: number;
}) => (
    <>
        <div className='mb-10 h-4 w-32 animate-pulse rounded bg-muted' />
        <div className='grid gap-6 sm:grid-cols-2 xl:grid-cols-3'>
            {Array.from({ length: skeletonSize }).map((_, i) => (
                <ArticleCardSkeleton key={i} />
            ))}
        </div>
    </>
);