import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';
import SurfaceCard from '@/components/common/SurfaceCard';

/**
 * The shared loading skeleton for the sidebar-shell route groups (`nurse`, `admin`, `partner`) — the
 * `TopBarAndSideBarLayout` chrome (top bar + sidebar) is already rendered by the enclosing `layout.tsx`
 * by the time this shows, so this only needs to shape the content area: a heading line + a short stack of
 * generic worklist/detail cards. A private (`_`-prefixed) folder — not a route.
 */
export default function SidebarShellSkeleton() {
  return (
    <Stack sx={{ gap: 2 }}>
      <Skeleton variant="text" width={220} height={32} />
      {[0, 1, 2].map((key) => (
        <SurfaceCard key={key}>
          <Stack sx={{ gap: 0.75 }}>
            <Skeleton variant="text" width="40%" height={22} />
            <Skeleton variant="text" width="70%" height={18} />
            <Skeleton variant="text" width="55%" height={18} />
          </Stack>
        </SurfaceCard>
      ))}
    </Stack>
  );
}
