'use client';

import React, {FC} from 'react';
import {ModalComponents as S} from './basic-modal.style';
import {IBasicModalProps} from './basic-modal.type';
import ModalHeader from './components/modal-header';
import BasicModalContextProvider from './context';
import {IModalHeaderProps} from './components/modal-header/types';
import ModalBody from './components/modal-body';
import ModalFooter from './components/modal-footer';
import {IModalBodyProps} from './components/modal-body/types';
import {IModalFooterProps} from './components/modal-footer/types';

/**
 * @author Audelqua
 * @version 0.0.2
 * @description A React component that renders a basic modal.
 * @madeUse Emotion
 */

export const BasicModalComponent: FC<IBasicModalProps> & {
    Header: React.FC<IModalHeaderProps>;
    Body: React.FC<IModalBodyProps>;
    Footer: React.FC<IModalFooterProps>;
} = ({onClose, open, className, children}) => {
    return (
        <BasicModalContextProvider onClose={onClose} open={open}>
            <S.Container
                open={open}
                onClose={onClose}
                className={className}
                aria-labelledby='parent-modal-title'
                aria-describedby='parent-modal-description'
            >
                <S.ModalContent>{children}</S.ModalContent>
            </S.Container>
        </BasicModalContextProvider>
    );
};
BasicModalComponent.Header = ModalHeader;
BasicModalComponent.Body = ModalBody;
BasicModalComponent.Footer = ModalFooter;