import { Skeleton } from '@/components/ui/skeleton';

export const BuilderSkeleton = () => {
  return (
    <div className='flex flex-col h-screen'>
      <Skeleton className='w-full h-16 min-h-16 bg-neutral-800 rounded-none flex-shrink-0' />

      <div className='flex flex-1 w-full pt-5 flex-col items-center my-2'>
        <Skeleton className='w-full max-w-[1366px] h-[400px] bg-neutral-700 mb-8' />

        <div className='w-full max-w-[1366px] space-y-8'>
          <div className='space-y-4'>
            <Skeleton className='h-16 w-1/3 bg-neutral-700' />
            <Skeleton className='h-8 w-full bg-neutral-700' />
            <Skeleton className='h-8 w-full bg-neutral-700' />
          </div>

          <div className='grid grid-cols-3 gap-4'>
            <Skeleton className='h-[200px] bg-neutral-700' />
            <Skeleton className='h-[200px] bg-neutral-700' />
            <Skeleton className='h-[200px] bg-neutral-700' />
          </div>

          <div className='space-y-4'>
            <Skeleton className='h-10 w-1/4 bg-neutral-700' />
            <Skeleton className='h-8 w-full bg-neutral-700' />
          </div>

          <div className='grid grid-cols-5 gap-4'>
            <Skeleton className='h-[200px] col-span-1 bg-neutral-700' />
            <Skeleton className='h-[200px] col-span-4 bg-neutral-700' />
          </div>
        </div>
      </div>
    </div>
  );
};
