export default () => {
    const theme = useContext(Theme);

    const [isHoveringSendButton, setIsHoveringSendButton] = useState(false);
    const [themeButtonStyle, setThemeButtonStyle] = useState({});

    useEffect(() => {
        setThemeButtonStyle({
            backgroundColor: isHoveringSendButton ? `lighten(${theme.primaryColor}, 50%)` : theme.primaryColor
        });
    }, [isHoveringSendButton, theme.primaryColor]);

    return (
        <div>
            <input type="text" />
            <button style={themeButtonStyle}
                onMouseEnter={() => setIsHoveringSendButton(true)} onMouseLeave={() => setIsHoveringSendButton(false)}>
                Enviar
            </button>
        </div>
    );
}