import React, { useEffect, useState, FC } from 'react';

import { useStyles } from "./styles";

export const OpacityShowing: FC<any> = ({ delay = 0, timeout = 0, disabled = false, children }) => {
    const [active, setActive] = useState(false);
    const { root, showed } = useStyles({ theme: { timeout } });

    useEffect(() => {
        if (!disabled) {
            setTimeout(() => {
                setActive(true);
            }, delay)
        }
    }, [])

    return (
        <div className={`${root} ${active || disabled ? showed: ''}`}>
            {children}
        </div>
    )
}
