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

interface Props {
  children: React.ReactNode;
  pageTitle?: string;
  pageSubTitle?: string;
  pageSubSubTitle?: string;
  mainHref?: any;
  subHref?: any;
}

export default function PPIDAdminNavbarWrapper({
  children,
  pageTitle,
  pageSubTitle,
  pageSubSubTitle,
  mainHref,
  subHref,
}: Props) {
  return (
    <div className="  relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden h-screen">
      <Navbar
        className="w-full bg-slate-100 dark:bg-[#0b2948]"
        isBordered
        classNames={{
          wrapper: "w-full max-w-full",
        }}
      >
        <NavbarContent as="div" justify="end">
          <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="logout" color="danger">
                Log Out
              </DropdownItem>
              <DropdownItem key="theme">
                <ThemeSwitch />{" "}
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </NavbarContent>
      </Navbar>
      {children}
    </div>
  );
}