import { useEffect, useState } from "react";
import { FiX } from "react-icons/fi";
import styles from "../styles/alert.module.scss";

const Alert = ({ text, id, children, accent=false }) => {
    const [hidden, setHidden] = useState(true);
    
    useEffect(() => {
        const isHidden = localStorage.getItem(`alert-${id}`);

        if(!isHidden) setHidden(false);
    })

    const handleHide = () => {
        localStorage.setItem(`alert-${id}`, true);
        setHidden(true);
    }

    if (hidden) return null;

    return (
        <div className={`${styles.alert} ${accent ? styles.themed : ""}`}>
            {children}
            <p>{text}</p>
            <FiX onClick={handleHide} className={styles.close} title="Hide"/>
        </div>
    )
}

export default Alert;