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 { nanoid } from "nanoid";
import { Link } from "@tanstack/react-router";

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">
					<Button variant="secondary" className="hidden px-2 md:block">
						<Link to="/sign-in">Login</Link>
					</Button>
					<Button className="ml-2 mr-2 hidden md:block"><Link to="/sign-up">Get Started</Link></Button>

					<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">
										Login
									</Button>
								</DropdownMenuItem>
								<DropdownMenuItem>
									<Button className="w-full text-sm">Get Started</Button>
								</DropdownMenuItem>
							</DropdownMenuContent>
						</DropdownMenu>
					</div>

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

const landings = [
	{
		id: nanoid(),
		title: "Landing 01",
		route: "/project-management"
	},
	{
		id: nanoid(),
		title: "Landing 02",
		route: "/crm-landing"
	},
	{
		id: nanoid(),
		title: "Landing 03",
		route: "/ai-content-landing"
	},
	{
		id: nanoid(),
		title: "Landing 04",
		route: "/new-intro-landing"
	},
	{
		id: nanoid(),
		title: "Landing 05",
		route: "/about-us-landing"
	},
	{
		id: nanoid(),
		title: "Landing 06",
		route: "/contact-us-landing"
	},
	{
		id: nanoid(),
		title: "Landing 07",
		route: "/faqs-landing"
	},
	{
		id: nanoid(),
		title: "Landing 08",
		route: "/pricing-landing"
	},
	{
		id: nanoid(),
		title: "Landing 09",
		route: "/career-landing"
	}
];

export default MainNavbar;