/**
 * @deprecated — no Hugo equivalent.
 * Dims and disables children via CSS opacity during a loading state.
 * Hint: simple enough to inline directly in each consumer as a styled wrapper — no new Hugo component needed.
 */
import { ReactNode } from 'react';

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

const StatusAwareWrapper = ({
  children,
  status,
}: {
  children: ReactNode;
  status: 'loading' | 'idle';
}) => {
  return (
    <Stack
      sx={{
        display: 'contents',
        '& > *': {
          transition: 'opacity 0.25s, transform 0.25s',
          ...(status === 'loading' && {
            opacity: 0.5,
            transform: 'scale(0.98)',
            userSelect: 'none',
            cursor: 'not-allowed',
            '& > *': {
              pointerEvents: 'none',
            },
          }),
        },
      }}
    >
      {children}
    </Stack>
  );
};

export default StatusAwareWrapper;