import { Menu, X } from "lucide-react";
import { useTranslations } from "next-intl";
import { useState } from "react";

export default function NavigationBar() {
	const t = useTranslations("Navigation");
	const [menuOpen, setMenuOpen] = useState<boolean>(false);

	return (
		<>
			{/* Menu Button for Mobile */}
			<div className="md:hidden">
				<button onClick={() => setMenuOpen(!menuOpen)}>
					{menuOpen ? (
						<X className="h-6 w-6 text-gray-900 dark:text-white" />
					) : (
						<Menu className="h-6 w-6 text-gray-900 dark:text-white" />
					)}
				</button>
			</div>

			{/* Navigation Links */}
			<nav
				className={`md:flex ${
					menuOpen ? "block" : "hidden"
				} md:block space-x-4`}>
				<a
					href="/"
					className="text-gray-900 dark:text-white hover:text-blue-500">
					{t("home")}
				</a>
				<a
					href="/about"
					className="text-gray-900 dark:text-white hover:text-blue-500">
					About
				</a>
				<a
					href="/contact"
					className="text-gray-900 dark:text-white hover:text-blue-500">
					Contact
				</a>
			</nav>
		</>
	);
}
