import { useCallback } from 'react';

import type { ModalProps } from '~/src/components/Modal';
import type { FC, ReactNode } from 'react';

import Box from '~/src/components/Box';
import Modal from '~/src/components/Modal';
import Text from '~/src/components/Text';

export interface AlertModalProps {
  zIndex?: number;
  content?: ReactNode;
  title?: string;
  onClose: ModalProps['onClose'];
}

const AlertModal: FC<AlertModalProps> = ({
  zIndex,
  onClose,
  title,
  content,
}) => (
  <Modal
    zIndex={zIndex}
    onClose={onClose}
    testId="alertModal"
    renderContent={useCallback(
      () => (
        <Box
          flexBox
          flexColumn
          justifyCenter
          maxWidth="38rem"
          style={{ fontSize: '2.8rem', textAlign: 'center' }}
        >
          {title && (
            <Text isBold margin="0 0 0.5em">
              {title}
            </Text>
          )}
          {content}
        </Box>
      ),
      [content]
    )}
  />
);

export default AlertModal;