import React, { useEffect, useState } from "react";
import { clearAuthData, isAuthenticated } from "../utils/auth-client";

const SignOut = () => {
	const [isVisible, setIsVisible] = useState(false);

	useEffect(() => {
		setIsVisible(isAuthenticated());

		const handleAuthChange = () => {
			setIsVisible(isAuthenticated());
		};

		document.addEventListener("auth-success", handleAuthChange);
		return () => document.removeEventListener("auth-success", handleAuthChange);
	}, []);

	if (!isVisible) return null;

	return (
		<button onClick={clearAuthData} className="btn btn-secondary">
			Sign Out
		</button>
	);
};

export default SignOut;