import Skeleton from '@design-system/Skeleton';
import { Stack } from '@mui/material';

import { type ProgressCircleSkeletonProps } from './types';

const ProgressCircleSkeleton = ({ sx }: ProgressCircleSkeletonProps) => {
  return (
    <Stack
      className="ProgressCircleSkeleton-root"
      sx={{
        alignItems: 'center',
        gap: 2,
        ...sx,
      }}
    >
      <Skeleton
        variant="circular"
        width={160}
        height={160}
      />
      <Stack sx={{ gap: 0.5, alignItems: 'center' }}>
        <Skeleton
          height={16}
          width={100}
        />
        <Skeleton
          height={24}
          width={200}
        />
        <Skeleton
          height={20}
          width={100}
        />
      </Stack>
    </Stack>
  );
};

export default ProgressCircleSkeleton;