import BaseIconButton from '@/components/ui-kit/BaseIconButton';
import { Close } from '@mui/icons-material';
import { Box, Modal, Stack, styled } from '@mui/material';
import React from 'react';

const StyledBox = styled(Box)`
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: auto;
    max-height: 90%;

    border-radius: 8px;
    background: #fff;
    box-shadow: 4px 4px 4px 0px rgba(17, 87, 155, 0.08);
    display: flex;
    padding: 10px 32px 40px;
    flex-direction: column-reverse;
    width: 100%;

    .modal-close-btn {
        margin-right: -20px;
    }
`;

type Props = {
    children: React.ReactNode;
    onClose: () => void;
    open: boolean;
    maxWidth: string;
};

const BaseModal = ({ children, onClose, open, maxWidth }: Props) => {
    return (
        <Modal open={open} onClose={onClose}>
            <StyledBox sx={{ maxWidth }}>
                <Box>{children}</Box>
                <Stack direction={'row'} alignSelf={'flex-end'} justifyContent={'flex-end'} mb={1}>
                    <BaseIconButton className='modal-close-btn' onClick={onClose}>
                        <Close />
                    </BaseIconButton>
                </Stack>
            </StyledBox>
        </Modal>
    );
};

export default BaseModal;
