import React from 'react';
import PropTypes from 'prop-types';

import '../styles/type.css';

import { AlertCircle } from 'react-feather'

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

    let settings = {}

    switch (type) {
        case 'error':
            settings = {
                color: "#F95656",
                labelMessage: 'Error'
            }
            break;
        case 'succes':
            settings = {
                color: "#5BE2A7",
                labelMessage: 'Succes'
            }
            break;

        case 'info':
            settings = {
                color: "#56ABF9",
                labelMessage: 'Info'
            }
            break;

        case 'warning':
            settings = {
                color: "#FBCD59",
                labelMessage: 'Warning'
            }
            break;

        default:
            settings = {
                color: "#DCDCDC",
                labelMessage: 'Extra'
            }
            break;
    }

    const { color, labelMessage } = settings

    return (
        <div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <AlertCircle size={18} color={color} />
                <label style={{ color: color, margin: 0, marginLeft: 8 }}>{labelMessage}:</label>
            </div>
            <p style={{ fontWeight: 500, color: color, margin: 0, marginLeft: 8 }}>{message}</p>
        </div>
    );
}

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

Message.defaultProps = {
    type: 'extra'
}