import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";

//import MailboxList from "./Mailbox";
import AuthModal from "./AuthModal";
import React, { useEffect, useState } from "react";

interface IAuth {
	password: string;
	username: string;
}

const App = () => {
	const [state, setInternalState] = useState<IAuth | null>(null);

	const fetchUserData = () => {
		fetch("https://jsonplaceholder.typicode.com/users")
			.then((response) => {
				return response.json();
			})
			.then((data) => {
				//setUsers(data)
			});
	};

	const loadAuth = () => {
		const auth = localStorage.getItem("auth");
		if (!auth) return;
		setInternalState(JSON.parse(auth));
	};

	const setState = (auth: IAuth) => {
		localStorage.setItem("auth", JSON.stringify(auth));
	};

	useEffect(() => {
		loadAuth();
		//fetchUserData()
	}, []);

	return (
		<div className="App">
			{state ? <p>{state.username}</p> : <AuthModal doLogin={() => alert("login")}></AuthModal>}
		</div>
	);
};

export default App;