import React from 'react'
import styled from 'styled-components';
import {Row} from '../baseComponents'

const Styles =  styled('div')`${props=>`
  margin : 0px;
  height : 75px;
  width : 400px;
  box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.3);
  border-radius : 4px;
  .material-icons{
    color : white;
  }
`}`


export class ToastComp extends React.Component {
  render() {
    var themeColor = this.props.theme=='red' ? 'red' : '#19b985'
    return(
        <Styles {...this.props} >
          <Row height='100%'>
            <Row center background={themeColor} width='10%'>{
              themeColor=='red' && <i className="material-icons">clear</i> || <i className="material-icons">done</i>
            }</Row>
            <Row vCenter width='90%' padding='0px 10px' color='rgba(0,0,0,0.7)' background='#fafbfc'>{this.props.msg}</Row>
          </Row>
        </Styles>
    );
  }
}