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

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

const BreakdownSkeleton = ({ sx }: BreakdownSkeletonProps) => {
  return (
    <Stack
      className="BreakdownSkeleton-root"
      sx={{
        alignItems: 'center',
        gap: 2,
        ...sx,
      }}
    >
      {Array.from({ length: 3 }, (_, index) => (
        <Skeleton
          key={index}
          width="100%"
          height={25}
        />
      ))}
    </Stack>
  );
};

export default BreakdownSkeleton;