"use client"

import Link                            from "next/link";
import { useState }                    from "react"
import { Menu }                        from "lucide-react";
import { X }                           from "lucide-react";
import { Button }                      from "@/components/ui/button";
import { HeaderSearch }                from '@/components/header-search';
import { HeaderNotifications }         from '@/components/header-notifications';
import { UserMenu }                    from '@/components/user-menu';
import { AppSidebar }                  from '@/components/app-sidebar';

export function AppHeader({
  search,
  onSearchAction,
  navigation,
}: {
  search?: boolean | {
    placeholder: string;
  };
  onSearchAction?: (q: string) => [];
  navigation?: Array<{
    name: string,
    icon: any,
  } & ({ href: string } | {
    children: {
      name: string,
      href: string,
      icon: any,
    }[]
  })>;
}) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <>
      <AppSidebar open={sidebarOpen} setOpenAction={setSidebarOpen} navigation={navigation}
       />
      <header className="sticky top-0 z-30 bg-card border-b border-border lg:pl-64">
        <div className="flex items-center justify-between gap-4 py-3 px-3">
          <Button className="p-0 cursor-pointer bg-transparent hover:bg-transparent lg:hidden" variant="ghost" size="icon" onClick={() => setSidebarOpen(!sidebarOpen)}>
            {sidebarOpen ? <X className="h-8 w-8" /> : <Menu className="h-8 w-8" />}
          </Button>

          {/* {search && <HeaderSearch onSearch={onSearchAction} placeholder={'object' === typeof search ? search?.placeholder : undefined} />} */}
          <div></div>

          <div className="flex items-center gap-2">
            {/* <HeaderNotifications /> */}
            <UserMenu />
          </div>
        </div>
      </header>
    </>
  )
}