"use client";
import {
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
} from "@nextui-org/navbar";
import {
  Avatar,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownTrigger,
  ScrollShadow,
} from "@nextui-org/react";
import React from "react";
import { ThemeSwitch } from "../../theme-switch";
import Link from "next/link";

interface Props {
  children: React.ReactNode;
  pageTitle?: string;
}
export default function HumasNavbarWrapper({ children }: Props) {
  return (
    <div className="w-full relative overflow-y-auto overflow-x-hidden">
      <Navbar
        maxWidth="full"
        className="dark:text-white bg-slate-200 dark:bg-[#182237]"
        isBordered
        classNames={{
          wrapper: "p-2",
        }}
      >
        <NavbarContent>
          <NavbarItem>Judul</NavbarItem>
        </NavbarContent>
        <NavbarContent as="div" justify="end" className="pr-2">
          <Dropdown placement="bottom-end">
            <DropdownTrigger>
              <Avatar
                isBordered
                as="button"
                className="transition-transform"
                color="secondary"
                name="Jason Hughes"
                size="sm"
                src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
              />
            </DropdownTrigger>
            <DropdownMenu aria-label="Profile Actions" variant="flat">
              <DropdownItem key="profile" className="h-14 gap-2">
                <p className="font-semibold">Signed in as</p>
                <p className="font-semibold">zoey@example.com</p>
              </DropdownItem>
              <DropdownItem key="settings">My Settings</DropdownItem>
              <DropdownItem key="help_and_feedback">
                Help & Feedback
              </DropdownItem>
              <DropdownItem key="logout" color="danger">
                Log Out
              </DropdownItem>
              <DropdownItem>
                <ThemeSwitch />
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </NavbarContent>
      </Navbar>
      <div className="p-2">{children}</div>
    </div>
  );
}