'use client'
import { Input } from "@nextui-org/input";
import {
	NavbarBrand,
	NavbarContent,
	NavbarItem,
	NavbarMenu,
	NavbarMenuItem,
	NavbarMenuToggle,
	Navbar as NextUINavbar
} from "@nextui-org/navbar";



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

import { siteConfig } from "@/config/site";
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownSection, DropdownTrigger, Image, Link } from "@nextui-org/react";
import { useEffect, useState } from "react";

export const Navbar = () => {
	const [hasMounted, setHasMounted] = useState(false);

	const searchInput = (
		<Input
			aria-label="Search"
			classNames={{
				inputWrapper: "bg-default-100",
				input: "text-sm",
			}}
			labelPlacement="outside"
			placeholder="Search..."
			startContent={
				<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
			}
			type="search"
		/>
	);

	useEffect(() => {
		setHasMounted(true);
	}, []);

	// Render
	if (!hasMounted) return null;

	return (
		<NextUINavbar className="h-28 md:h-36"
			classNames={{
				wrapper: "max-w-full h-[90%]",
			}}>
			<NavbarBrand className="min-w-max">
				<Image
					src="/logohumas.png"
				/>
			</NavbarBrand>
			<NavbarContent className="hidden md:flex   basis-3/5 gap-0 md:gap-4 lg:gap-12 px-auto lg:px-10" justify="center">
				<NavbarItem>
					<div >
						<Dropdown>
							<NavbarItem>
								<DropdownTrigger>
									<Button
										disableRipple
										className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
										radius="sm"
										variant="light"
										endContent={<ChevronDownIcon className="pt-1" />}
									>
										Pelayanan Masyarakat
									</Button>
								</DropdownTrigger>
							</NavbarItem>
							<DropdownMenu
								aria-label="pelayanan-masyarakat"
								className=""
							>
								<DropdownSection
									title="Pelayanan Masyarakat" showDivider
									classNames={{
										group: "flex flex-row",
										base: "",

									}}>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/logo1.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">Pelayanan Surat Pemberitahuan Perkembangan Hasil Penyidikan Online</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/pm2.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Formulir Permohonan Informasi</div>
												<div className="truncate max-w-min">
													Pelayanan Permohonan Formulir Informasi
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/pm3.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Pelayanan SIM</div>
												<div className="truncate max-w-min">
													Pelayanan Untuk Pendaftaran SIM dan Perpanjangan SIM Berbasis Online
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/pm4.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Pelayanan E-Rikkes SIM</div>
												<div className="truncate max-w-min">
													Pelayanan Pemeriksaan Kesehatan Berbasis Teknologi Berbasis Online Dalam Proses Penerbitan SIM.
												</div>
											</div>
										</div>
									</DropdownItem>
								</DropdownSection>
								<DropdownSection classNames={{
									group: "flex flex-row",
									base: "",

								}}>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/pm5.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Pelayanan Test Psikologi SIM</div>
												<div className="truncate max-w-min">
													Pelayanan Pembuatan Test Psikologi SIM Berbasis Online.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/pm6.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Pelayanan E-Avis</div>
												<div className="truncate max-w-min">
													Pelayanan Ujian Teori SIM Berbasis Online.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/pm7.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Pelayanan Samsat Digital</div>
												<div className="truncate max-w-min">
													Pelayanan Samsat Berbasis Online.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/pm8.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Pelayanan SKCK</div>
												<div className="truncate max-w-min">
													Pelayanan Pembuatan SKCK Berbasis Online.
												</div>
											</div>
										</div>
									</DropdownItem>
								</DropdownSection>
								<DropdownSection classNames={{
									group: "flex flex-row",
									base: "",

								}}>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/pm9.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Pelayanan Propam Presisi</div>
												<div className="truncate max-w-min">
													Pelayanan Untuk Masyarakat Agar Mudah Melaporkan Sesuatu Kejadian atau Kejahatan.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/pm10.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Pelayanan Dumas Presisi</div>
												<div className="truncate max-w-min">
													Layanan Pengaduan Masyarakat Terintegrasi Berbasis Online.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/pm11.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Pelayanan Binmas</div>
												<div className="truncate max-w-min">
													Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/pm12.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Clean & Clear Polri</div>
												<div className="truncate max-w-min">
													Pelayanan Berbasis Aplikasi untuk Pengaduan Penerimaan Anggota POLRI.
												</div>
											</div>
										</div>
									</DropdownItem>
								</DropdownSection>
							</DropdownMenu>
						</Dropdown>
					</div>
				</NavbarItem>
				<NavbarItem >
					<Link href="/portal-ppid">
						<Button
							className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
							variant="light">
							Portal PPID
						</Button>
					</Link>
					{/* <Dropdown className="w-[97vw]">
						<DropdownTrigger>
							<Button
								className="bg-transparent p-0 text-medium font-semibold data-[hover=true]:bg-transparent"
								variant="light"
							>
								Portal PPID
							</Button>
						</DropdownTrigger>
						<DropdownMenu
							aria-label="Action event example"
							onAction={(key) => alert(key)}
							classNames={{
								base: 'border-2 border-green-500 '
							}}
							itemClasses={{
								wrapper: "border-2 border-green-500",
								base: "w-[350px] text-wrap"
							}}
							itemClasses={{
								base: 'border-2 border-pink-500 w-80 data-[hover=true]:w-max'
							}}
						>
							<DropdownSection
								classNames={{
									group: "flex",
								}}>
								<DropdownItem>Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.</DropdownItem>
								<DropdownItem>Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.</DropdownItem>
								<DropdownItem>Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.</DropdownItem>
								<DropdownItem>Pelayanan Berbasis Website Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.</DropdownItem>
							</DropdownSection>
						</DropdownMenu>
					</Dropdown> */}
				</NavbarItem>
				<NavbarItem>
					<div >
						<Dropdown>
							<NavbarItem>
								<DropdownTrigger>
									<Button
										disableRipple
										className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
										radius="sm"
										variant="light"
										endContent={<ChevronDownIcon className="pt-1" />}
									>
										Publikasi
									</Button>
								</DropdownTrigger>
							</NavbarItem>
							<DropdownMenu
								aria-label="pelayanan-masyarakat"
								className=""
							>
								<DropdownSection classNames={{
									group: "flex flex-row",
									base: "",

								}}>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">
													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">
													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">
													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">
													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
												</div>
											</div>
										</div>
									</DropdownItem>
								</DropdownSection>
								<DropdownSection classNames={{
									group: "flex flex-row",
									base: "",

								}}>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">
													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">
													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">
													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">
													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
												</div>
											</div>
										</div>
									</DropdownItem>
								</DropdownSection>
								<DropdownSection classNames={{
									group: "flex flex-row",
									base: "",

								}}>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">
													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">
													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">
													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="sp2hp"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/sp2h.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">
													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
												</div>
											</div>
										</div>
									</DropdownItem>
								</DropdownSection>
							</DropdownMenu>
						</Dropdown>
					</div>
				</NavbarItem>
				<NavbarItem>
					<div >
						<Dropdown>
							<NavbarItem>
								<DropdownTrigger>
									<Button
										disableRipple
										className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
										radius="sm"
										variant="light"
										endContent={<ChevronDownIcon className="pt-1" />}
									>
										Tentang
									</Button>
								</DropdownTrigger>
							</NavbarItem>
							<DropdownMenu
								aria-label="pelayanan-masyarakat"
								className=""
							>


								<DropdownItem>
									<Link href="/about">
										test
									</Link>
								</DropdownItem>
							</DropdownMenu>
						</Dropdown>
					</div>
				</NavbarItem>
				<NavbarItem>
					<div >
						<Dropdown>
							<NavbarItem>
								<DropdownTrigger>
									<Button
										disableRipple
										className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
										radius="sm"
										variant="light"
										endContent={<ChevronDownIcon className="pt-1" />}
									>
										Aplikasi Terkait
									</Button>
								</DropdownTrigger>
							</NavbarItem>
							<DropdownMenu
								aria-label="pelayanan-masyarakat"
								className=""
							>
								<DropdownSection classNames={{
									group: "flex flex-row",
									base: "",

								}}>
									<DropdownItem
										key="1"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at1.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Polri Super App</div>
												<div className="truncate max-w-min">
													Aplikasi Layanan Perpanjangan SIM, Pembayaran STNK, Pengaduan Masyarakat.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="2"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at2.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Media Hub</div>
												<div className="truncate max-w-min">
													Humas Polri dalam Data.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="3"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at3.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Polisiku</div>
												<div className="truncate max-w-min">
													Membantu anggota Kepolisian untuk mengindetifikasi masalah di lapangan.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="4"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at4.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SP2HP</div>
												<div className="truncate max-w-min">
													Surat Pemberitahuan Perkembangan Hasil Penyidikan Online.
												</div>
											</div>
										</div>
									</DropdownItem>
								</DropdownSection>
								<DropdownSection classNames={{
									group: "flex flex-row",
									base: "",

								}}>
									<DropdownItem
										key="5"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at5.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Polri TV</div>
												<div className="truncate max-w-min">
													Humas Polri dalam Audio Visual.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="6"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at6.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Polri Radio</div>
												<div className="truncate max-w-min">
													Humas Polri dalam Audio.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="7"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at7.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>E-Avis</div>
												<div className="truncate max-w-min">
													Platform Ujian Teori SIM.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="8"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at8.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>E-Rikkes</div>
												<div className="truncate max-w-min">
													Pemeriksaan Kesehatan Berbassi Teknologi Secara Online dalam Proses Penerbitan SIM.
												</div>
											</div>
										</div>
									</DropdownItem>
								</DropdownSection>
								<DropdownSection classNames={{
									group: "flex flex-row",
									base: "",

								}}>
									<DropdownItem
										key="9"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at9.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>E-PPSI</div>
												<div className="truncate max-w-min">
													Tes Psikologis SIM Secara Online.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="10"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at10.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>BOS</div>
												<div className="truncate max-w-min">
													Aplikasi Sistem Informasi Satpam Online, BUJP, Pelaporan Binmas.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="11"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at11.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Signal</div>
												<div className="truncate max-w-min">
													Aplikasi Samsat Digital Nasional.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="12"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at12.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SKCK Online</div>
												<div className="truncate max-w-min">
													Aplikasi Pembuatan SKCK Secara Online.
												</div>
											</div>
										</div>
									</DropdownItem>
								</DropdownSection>
								<DropdownSection classNames={{
									group: "flex flex-row",
									base: "",

								}}>
									<DropdownItem
										key="13"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at13.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Propam Presisi</div>
												<div className="truncate max-w-min">
													Aplikasi Pelayanan Masyarakat untuk Melapor Secara Mudah.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="14"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at14.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Monitoring Presisi</div>
												<div className="truncate max-w-min">
													Aplikasi Anggota Binmas dan Satpam Polda Metro Jaya Melaporkan Tugas.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="15"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at15.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>SDM - Penerimaan POLRI</div>
												<div className="truncate max-w-min">
													Website untuk Memonitoring Penerimaan Anggota POLRI.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="16"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at16.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Wistle Blowing System</div>
												<div className="truncate max-w-min">
													Website untuk Pengaduan Penerimaan Anggota POLRI.
												</div>
											</div>
										</div>
									</DropdownItem>
								</DropdownSection>
								<DropdownSection classNames={{
									group: "flex flex-row",
									base: "",

								}}>
									<DropdownItem
										key="17"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at17.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Dumas Presisi</div>
												<div className="truncate max-w-min">
													Website Layanan Pengaduan Masyarakat Terintegrasi.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="18"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at18.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Clean & Clear Polri</div>
												<div className="truncate max-w-min">
													Aplikasi untuk Memonitoring Penerimaan Angota POLRI.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="19"
									>
										<div className="flex items-center w-[350px]">
											<div className="min-w-max"><img src="/at19.png" alt="" /></div>
											<div className="text-xs pl-2">
												<div>Sinar</div>
												<div className="truncate max-w-min">
													Aplikasi dan Website Pelayanan Pendaftaran dan Perpanjangan SIM.
												</div>
											</div>
										</div>
									</DropdownItem>
									<DropdownItem
										key="12"
									>
										<div className="flex items-center w-[350px]">

										</div>
									</DropdownItem>
								</DropdownSection>
							</DropdownMenu>
						</Dropdown>
					</div>
				</NavbarItem>
				<NavbarItem>
					<ThemeSwitch />
				</NavbarItem>
			</NavbarContent>
			<NavbarContent className="hidden sm:hidden md:hidden lg:flex basis-1/5  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>

			<NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
				<ThemeSwitch />
				<NavbarMenuToggle />
			</NavbarContent>

			<NavbarMenu>
				{/* {searchInput} */}
				<div className="mx-4 mt-2 flex flex-col gap-2 pt-10">
					{siteConfig.navMenuItems.map((item, index) => (
						<NavbarMenuItem key={`${item}-${index}`}>
							<Link
								href={item.href}
								size="lg"
							>
								{item.label}
							</Link>
						</NavbarMenuItem>
					))}
				</div>
			</NavbarMenu>
		</NextUINavbar>
	);
};