import { useSidebarColors } from '@composed-components/LibrariesSidebar/hooks/useGetSidebarColors';
import Skeleton from '@design-system/Skeleton';
import Stack from '@mui/material/Stack';

export const SidebarHeaderLoading = () => {
  const colors = useSidebarColors();

  return (
    <Stack
      sx={{
        py: 2.5,
        px: 2,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: colors.MAIN_WHITE,
      }}
    >
      <Skeleton
        width={75}
        height={25}
      />
      <Stack sx={{ flexDirection: 'row', gap: 1 }}>
        <Skeleton
          width={35}
          height={35}
        />
        <Skeleton
          width={35}
          height={35}
        />
      </Stack>
    </Stack>
  );
};
