import react from 'react';
import Modal from '../modal';
import Spinner from '../spinner';

const LoadingModal = react.memo(
  ({
    msg,
    visibility,
    spinColor,
    spinThickness,
    messageStyle,
  }: {
    msg?: string;
    visibility?: boolean;
    spinColor?: string;
    spinThickness?: number;
    messageStyle?: React.CSSProperties;
  }) => {
    return (
      <Modal
        styleWrapper={{
          flex: 1,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
        style={{ display: 'flex' }}
        visibility={visibility || true}
      >
        <div
          style={{
            backgroundColor: 'white',
            borderRadius: '1rem',
            flex: 1,
            maxWidth: '20%',
            padding: '2rem',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            rowGap: '2rem',
          }}
        >
          <p style={messageStyle}>{msg || 'Carregando'}</p>

          <Spinner
            style={{ width: '2rem', height: '2rem' }}
            color={spinColor || 'black'}
            thickness={spinThickness}
          />
        </div>
      </Modal>
    );
  },
);
export default LoadingModal;
