import { Skeleton } from '@sim/emcn'

const AUTHOR_POST_SKELETON_COUNT = 4

/** Shared loading skeleton for a content section's author-profile route. */
export function ContentAuthorLoading() {
  return (
    <main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
      <div className='mb-6 flex items-center gap-3'>
        <Skeleton className='size-[40px] rounded-full bg-[var(--surface-hover)]' />
        <Skeleton className='h-[32px] w-[160px] rounded-[4px] bg-[var(--surface-hover)]' />
      </div>
      <div className='grid grid-cols-1 gap-8 sm:grid-cols-2'>
        {Array.from({ length: AUTHOR_POST_SKELETON_COUNT }).map((_, i) => (
          <div key={i} className='overflow-hidden rounded-lg border border-[var(--border)]'>
            <Skeleton className='h-[160px] w-full rounded-none bg-[var(--surface-hover)]' />
            <div className='p-3'>
              <Skeleton className='mb-1 h-[12px] w-[80px] rounded-[4px] bg-[var(--surface-hover)]' />
              <Skeleton className='h-[14px] w-[200px] rounded-[4px] bg-[var(--surface-hover)]' />
            </div>
          </div>
        ))}
      </div>
    </main>
  )
}