import React from 'react';
import { MainLayout } from '@/components/layout/MainLayout.tsx';
import Skeleton from '@/components/ui/Skeleton.tsx';
import OrganizationHeaderSkeleton from '@/components/organization/skeletons/OrganizationHeaderSkeleton.tsx';
import OrganizationDetailsGridSkeleton from '@/components/organization/skeletons/OrganizationDetailsGridSkeleton.tsx';
import OrganizationSidebarSkeleton from '@/components/organization/skeletons/OrganizationSidebarSkeleton.tsx';

const OrganizationPageSkeleton = () => {
  return (
    <MainLayout onNavigate={() => {}} className="bg-muted/30">
      <div className="mx-auto max-w-5xl px-4 py-12 sm:px-6 lg:px-8">
        <Skeleton className="h-10 w-36 mb-8" />

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
          <div className="lg:col-span-2 space-y-8">
            <OrganizationHeaderSkeleton />
            <Skeleton className="h-32 w-full" /> {/* Placeholder for description card */}
            <OrganizationDetailsGridSkeleton />
            <Skeleton className="h-64 w-full" /> {/* Placeholder for resource flows */}
            <Skeleton className="h-64 w-full" /> {/* Placeholder for symbiosis hub */}
          </div>

          <div className="lg:col-span-1 space-y-8 lg:sticky lg:top-24">
            <OrganizationSidebarSkeleton />
          </div>
        </div>
      </div>
    </MainLayout>
  );
};

export default OrganizationPageSkeleton;