"use client";

import { type ReactNode } from "react";
import Toolbar from "./ToolBar";
import { useSidenavStore } from "./sidenav/store";
import { SidebarClose, SidebarOpen } from "lucide-react";
import IconButton from "shared/ui/primitives/IconButton";

type TopToolbarProps = {
    children?: ReactNode;
};

export function TopToolbar({ children }: TopToolbarProps) {
    const { open, toggleSidenav } = useSidenavStore();

    return (
        <Toolbar>
            {!open && (
                <IconButton
                    icon={open ? SidebarClose : SidebarOpen}
                    onClick={toggleSidenav}
                />
            )}
            <div className="grow flex items-center justify-end gap-2 h-full overflow-hidden">{children}</div>
        </Toolbar>
    );
}