import {useState, useEffect} from "react";
import {useAuth} from "@/context/AuthContext";
import {Button} from "@/components/ui/button";
import {Switch} from "@/components/ui/switch";
import {log} from "console";

export default function Header() {
	const {user, logout} = useAuth();
	const [darkMode, setDarkMode] = useState<boolean>(false);

	useEffect(() => {
		if (darkMode) document.documentElement.classList.add("dark");
		else document.documentElement.classList.remove("dark");
	}, [darkMode]);

	return (
		<header className="border-b bg-card">
			<div className="flex items-center justify-between px-6 h-16">
				<div>
					<p className="text-sm text-muted-foreground">Welcome back</p>
					<p className="font-semibold">{user?.username}</p>
				</div>
				<div className="flex items-center gap-4">
					<div className="flex items-center gap-2">
						<span className="text-sm">Dark</span>
						<Switch checked={darkMode} onCheckedChange={setDarkMode} />
					</div>
					<Button variant="destructive" onClick={logout}>
						Logout
					</Button>
				</div>
			</div>
		</header>
	);
}