import React, { useEffect } from "react";

import PropTypes from 'prop-types';

import { Message } from './Message'
import { Padder } from './Padder'

export const MessageBox = ({ message, type }) => {

    let color = '#DCDCDC'
    let background = '#fff'

    switch (type) {
        case 'error':
            color = "#F95656"
            background = "rgba(249, 86, 86, 0.1)"
            break;
        case 'succes':
            color = "#5BE2A7"
            background = 'rgba(91, 226, 167, 0.1)'
            break;

        case 'info':
            color = "#56ABF9"
            background = 'rgba(86, 171, 249, 0.1)'
            break;

        case 'warning':
            color = "#FBCD59"
            background = 'rgba(251, 205, 89, 0.1)'
            break;
    }

    return (
        <div style={{ borderRadius: 15, border: `1px solid ${color}`, background: background, marginBottom: '2rem' }}>
            <Padder top="1em" left="2em" right="2em">
                <Message message={message} type={type} />
            </Padder>
        </div>
    );
};

MessageBox.propTypes = {
    message: PropTypes.string,
    type: PropTypes.oneOf(['error', 'info', 'extra', 'succes', 'warning'])
}

MessageBox.defaultProps = {
    type: 'extra'
}