import React, {ReactNode} from "react";
import styles from "./Alert.module.scss";
import {X, Check, Info, AlertTriangle} from "react-feather";

interface Props {
    children: ReactNode;
    displayed?: boolean;
    theme?: "success" | "warning" | "error" | "info";
    alignItem?: "left" | "center" | "right";
    closable?: boolean;
    fullWidth?: boolean;
    onClose?: () => void;
}

export default function Alert({displayed, theme = "success", alignItem = "left", closable, fullWidth, onClose, children}: Props): JSX.Element | null {

    if (closable && displayed === undefined) {
        throw new Error("Props displayed is required when closable is define for render control");
    }

    if (displayed || !closable) {
        return (
                <div className={`${styles.alert} ${styles[theme]} ${styles[alignItem]}`} data-full-width={fullWidth}>
                    <div className={styles.icon}>
                        {theme === "success" && <Check/>}
                        {theme === "info" && <Info/>}
                        {theme === "warning" && <Info/>}
                        {theme === "error" && <AlertTriangle/>}
                    </div>
                    {children}
                    {closable && <button type={"button"} className={styles.close} onClick={onClose}><X/></button>}
                </div>
        );
    } else {
        return null;
    }
}