import React from 'react';
import styled from 'styled-components';
import { Icon } from 'react-icons-kit';
import { alertTriangle } from 'react-icons-kit/feather/alertTriangle';
import { info } from 'react-icons-kit/feather/info';

const Box = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border: 2px solid ${props => props.color};
    width: fit-content;
    padding: 0.1rem 1rem;
    color: ${props => props.color};
`;
const Sign = styled.div`
    padding-right: 1rem;
`;
const Text = styled.p`
    line-height: 1.5;
    color: ${props => props.textColor};
`;

function MessageBox(props) {
    return (
        <Box color={props.boxColor}>
            <Sign>
                {}
                {props.msgType === 'alert' && (
                    <Icon icon={alertTriangle} size={32} />
                )}
                {props.msgType === 'info' && <Icon icon={info} size={32} />}
            </Sign>
            <Text textColor={props.textColor}>{props.children}</Text>
        </Box>
    );
}

export default MessageBox;