import React, { useEffect } from "react";

import { Message } from './Message'
import { Padder } from './Padder'
import { IconButton } from "./IconButton";

import { X } from 'react-feather'

export const Toast = ({ destroy, content, type, title, duration, id }) => {

    useEffect(() => {
        if (!duration) return;

        const timer = setTimeout(() => {
            destroy();
        }, duration);

        return () => clearTimeout(timer);
    }, [destroy, duration]);

    let color = '#DCDCDC'
    let background = '#fff'

    switch (type) {
        case 'error':
            color = "#F95656"
            background = "rgba(249, 86, 86, 0.1)"
            break;
        case 'succes':
            color = "#5BE2A7"
            background = 'rgba(91, 226, 167, 0.1)'
            break;

        case 'info':
            color = "#56ABF9"
            background = 'rgba(86, 171, 249, 0.1)'
            break;

        case 'warning':
            color = "#FBCD59"
            background = 'rgba(251, 205, 89, 0.1)'
            break;
    }

    return (
        <div style={{ borderRadius: 15, border: `1px solid ${color}`, background: background, marginBottom: '2rem' }}>
            <Padder top="1em" left="2em" right="2em">
                <Message message={content} type={type} />
            </Padder>
        </div>
    );
};