import React from 'react';
import './Toast.css';
import {
  CloseToastIcon,
  ErrorToastIcon,
  InfoToastIcon,
  SuccessToastIcon,
  WarningToastIcon,
} from './ToastIcons';

const Snack = props => {
  const { children, onDismiss, appearance } = props;

  return (
    <div className={`custom-toast toast-${appearance}`}>
      <div
        onClick={() => onDismiss()}
        style={{ padding: '5px', cursor: 'pointer' }}
        className="d-flx j-c-fe"
      >
        <CloseToastIcon />
      </div>
      <div style={{ paddingLeft: '10px' }}>
        <div
          style={{
            fontSize: '16px',
            lineHeight: '19px',
            fontWeight: 'bold',
            textTransform: 'capitalize',
          }}
          className="d-flx"
        >
          <div style={{ marginRight: '20px' }}>
            {appearance === 'success' && <SuccessToastIcon />}
            {appearance === 'error' && <ErrorToastIcon />}
            {appearance === 'warning' && <WarningToastIcon />}
            {appearance === 'info' && <InfoToastIcon />}
          </div>
          <h3>{appearance}</h3>
        </div>
        <p style={{ paddingLeft: '40px', fontSize: '16px' }}>{children}</p>
      </div>
    </div>
  );
};

export default Snack;
