import { useTheme } from '@material-hu/mui/styles';

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

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

const PathProgressSkeleton = () => {
  const { spacing } = useTheme();

  return (
    <CardContainer
      sx={{
        minWidth: RIGHT_DETAILS_WIDTH,
        width: RIGHT_DETAILS_WIDTH,
        mt: `calc(${spacing(1.5)} + 25.2px)`,
      }}
    >
      <ProgressCircle loading />
    </CardContainer>
  );
};

export default PathProgressSkeleton;