import {
	Navbar as NextUINavbar,
	NavbarContent,
	NavbarMenu,
	NavbarMenuToggle,
	NavbarBrand,
	NavbarItem,
	NavbarMenuItem,
} from "@nextui-org/navbar";
import { Button } from "@nextui-org/button";
import { Kbd } from "@nextui-org/kbd";
import { Link } from "@nextui-org/link";
import { Input } from "@nextui-org/input";

import { link as linkStyles } from "@nextui-org/theme";

import { siteConfig } from "@/config/site";
import NextLink from "next/link";
import clsx from "clsx";

import { ThemeSwitch } from "@/components/theme-switch";
import {
	TwitterIcon,
	GithubIcon,
	DiscordIcon,
	HeartFilledIcon,
	SearchIcon,
	ChevronDownIcon,
	FbIcon,
	IgIcon,
	YtIcon,
	TwIcon,
	TtIcon,
} from "@/components/icons";

import { Logo } from "@/components/icons";
import { Image } from "@nextui-org/react";

export const Navbar = () => {
	const searchInput = (
		<Input
			aria-label="Search"
			classNames={{
				inputWrapper: "bg-default-100",
				input: "text-sm",
			}}
			endContent={
				<Kbd className="hidden lg:inline-block" keys={["command"]}>
					K
				</Kbd>
			}
			labelPlacement="outside"
			placeholder="Search..."
			startContent={
				<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
			}
			type="search"
		/>
	);

	return (
		<NextUINavbar className="h-36 w-full lg:w-full"
			classNames={{
				wrapper: "w-full max-w-full h-[90%]",
			}}>
			<NavbarBrand className="max-w-fit">
				<Image
					src="/logohumas.png"
				/>
			</NavbarBrand>
			<NavbarContent className="hidden sm:flex gap-12 basis-2/3 " justify="center">
				<NavbarItem>
					<Link color="foreground" href="#">
						<p className="mr-1 font-semibold">Pelayanan Masyarakat</p>
						<ChevronDownIcon />
					</Link>
				</NavbarItem>
				<NavbarItem >
					<Link href="#" color="foreground">
						<p className="mr-1 font-semibold">Portal PPID</p>
					</Link>
				</NavbarItem>
				<NavbarItem>
					<Link color="foreground" href="#">
						<p className="mr-1 font-semibold">Publikasi</p>
						<ChevronDownIcon />
					</Link>
				</NavbarItem>
				<NavbarItem>
					<Link color="foreground" href="#">
						<p className="mr-1 font-semibold">Tentang</p>
						<ChevronDownIcon />
					</Link>
				</NavbarItem>
				<NavbarItem>
					<Link color="foreground" href="#">
						<p className="mr-1 font-semibold">Aplikasi Terkait</p>
						<ChevronDownIcon />
					</Link>
				</NavbarItem>
				<NavbarItem>
					<ThemeSwitch />
				</NavbarItem>
			</NavbarContent>
			<NavbarContent className="flex flex-col items-center ">
				<div className="flex gap-3">
					<div><FbIcon /></div>
					<div><IgIcon /></div>
					<div><YtIcon /></div>
					<div><TwIcon /></div>
					<div><TtIcon /></div>
				</div>
				<div className="font-bold">{searchInput}</div>
			</NavbarContent>
		</NextUINavbar>
	);
};