import { type FC } from 'react';

import Stack from '@material-hu/mui/Stack';

import HuSkeleton from '@material-hu/components/design-system/Skeleton';

const SidebarGroupsSubMenuSkeleton: FC = () => (
  <Stack sx={{ gap: 0.5 }}>
    <Stack
      direction="row"
      justifyContent="space-between"
      alignItems="center"
      sx={{ gap: 1.5, p: 1 }}
    >
      <HuSkeleton
        variant="rounded"
        width={60}
        height={20}
      />
      <HuSkeleton
        variant="rounded"
        width={60}
        height={20}
      />
    </Stack>
    <Stack
      direction="row"
      alignItems="center"
      sx={{ gap: 1.5, p: 1 }}
    >
      <HuSkeleton
        variant="rounded"
        width={36}
        height={36}
      />
      <HuSkeleton
        variant="rounded"
        width="65%"
        height={20}
      />
    </Stack>
  </Stack>
);

export default SidebarGroupsSubMenuSkeleton;
