import PageContainer from '@/components/layout/page-container';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

export default function Loading() {
  return (
    <PageContainer pageTitle='นำเข้าพนักงาน' pageDescription='กำลังโหลดหน้าจอนำเข้าพนักงาน...'>
      <div className='grid gap-4 lg:grid-cols-[1.1fr_0.9fr]'>
        <Card>
          <CardHeader className='space-y-3'>
            <Skeleton className='h-7 w-48' />
            <Skeleton className='h-4 w-full' />
          </CardHeader>
          <CardContent className='space-y-4'>
            <Skeleton className='h-10 w-full' />
            <div className='flex gap-2'>
              <Skeleton className='h-10 w-40' />
              <Skeleton className='h-10 w-40' />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className='space-y-3'>
            <Skeleton className='h-7 w-48' />
            <Skeleton className='h-4 w-full' />
          </CardHeader>
          <CardContent className='space-y-2'>
            {Array.from({ length: 7 }).map((_, index) => (
              <Skeleton key={index} className='h-10 w-full' />
            ))}
          </CardContent>
        </Card>
      </div>
    </PageContainer>
  );
}
