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

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

export default Snack;
