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>
	);
}