import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Menu } from "lucide-react";
import { Card } from "@/components/ui/card";
import { ThemeSwitch } from "./theme-switch";
import { Button } from "@/components/ui/button";
import DynamicLoginButton from "./dynamic-login-button";

const MainNavbar = () => {
	return (
		<div className="fixed left-0 top-0 z-50 box-border w-full border-b px-4 py-3 backdrop-blur-lg transition-all duration-300">
			<Card className="flex items-center justify-between gap-6 border-0 bg-transparent shadow-none">
				<ul className="hidden items-center gap-10 text-card-foreground md:flex">
					<li className="font-medium text-primary">
						<a href="#home">Home</a>
					</li>
					{/* <li>
						<a href="#pricing">Pricing</a>
					</li> */}
					<li>
						<a href="#faqs">FAQs</a>
					</li>
				</ul>

				<div className="flex items-center">
					<DynamicLoginButton />
					<div className="mr-2 flex items-center gap-2 md:hidden">
						<DropdownMenu>
							<DropdownMenuTrigger asChild>
								<Button variant="outline" size="icon">
									<Menu className="h-5 w-5 rotate-0 scale-100" />
								</Button>
							</DropdownMenuTrigger>

							<DropdownMenuContent align="end">
								<DropdownMenuItem>
									<a href="#home">Home</a>
								</DropdownMenuItem>
								<DropdownMenuItem>
									<a href="#features">Features</a>
								</DropdownMenuItem>
								{/* <DropdownMenuItem>
									<a href="#pricing">Pricing</a>
								</DropdownMenuItem> */}
								<DropdownMenuItem>
									<a href="#faqs">FAQs</a>
								</DropdownMenuItem>
								<DropdownMenuItem>
									<Button variant="secondary" className="w-full text-sm">
										Sign in
									</Button>
								</DropdownMenuItem>
								<DropdownMenuItem>
									<Button className="w-full text-sm">Get Started</Button>
								</DropdownMenuItem>
							</DropdownMenuContent>
						</DropdownMenu>
					</div>

					<ThemeSwitch />
				</div>
			</Card>
		</div>
	);
};

export default MainNavbar;