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

import ProgressCircle from '@material-hu/components/composed-components/ProgressCircle';
import CardContainer from '@material-hu/components/design-system/CardContainer';

import { COURSE_DETAIL_SIDE_WIDTH } from '../../constants';

export const CourseProgressSkeleton = () => {
  return (
    <Stack sx={{ gap: 2, mt: 4.5, minWidth: COURSE_DETAIL_SIDE_WIDTH }}>
      <CardContainer
        fullWidth
        sx={{
          width: COURSE_DETAIL_SIDE_WIDTH,
        }}
      >
        <ProgressCircle loading />
      </CardContainer>
    </Stack>
  );
};
