import React, { useState } from "react";
import './alert.css'
import Iconsvg from '../../Ui/Icon/Icon'

type Props = {
    title?:string,
    message: string,
    alertType: 'primary' | 'success' | 'info' | 'warning' | 'danger',
    alertIcon?: boolean,
    closeIcon?: boolean,
    iconName?:any,
}

const Alert = (props:Props) => {
    const {title, message, alertType, alertIcon, closeIcon, iconName} = props;
    const [show, setShow] = useState<boolean>(true)
    const alertClose = () => {
        setShow(false)
    };

    return (
        <>
            { show && 
                <div className={`alert ${alertType ? `alert-${alertType}` : ''}`}>
                    {alertIcon && <span className="alert-inner--icon"><Iconsvg name={iconName} /></span> }
                    <span className="alert-inner--text"> <strong>{title}</strong> {message}</span>
                    {closeIcon && <button onClick={alertClose} type="button" className="alert-close-icon"><Iconsvg name='close'/></button>}
                </div>
            }
        </>
    );
};

export default Alert;