import { Breadcrumbs } from "@/components/breadcrumbs";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { ThemeToggle } from "@/components/theme-toggle";
import SignalAlertCenter from "@/components/SignalAlertCenter";
import HeaderCoinSearchLauncher from "@/components/trading/HeaderCoinSearchLauncher";
import type { BreadcrumbItem as BreadcrumbItemType } from "@/types";

export function AppSidebarHeader({
    breadcrumbs = [],
}: {
    breadcrumbs?: BreadcrumbItemType[];
}) {
    return (
        <header className="sticky top-0 z-30 flex min-h-14 w-full min-w-0 shrink-0 items-center gap-2 border-b border-border bg-background/80 px-2 py-2 backdrop-blur-xl transition-[width,height] ease-linear sm:h-14 sm:gap-3 sm:px-4 sm:py-0">
            <SidebarTrigger className="-ml-1 text-muted-foreground hover:text-foreground" />
            <div className="min-w-0 flex-1">
                <Breadcrumbs breadcrumbs={breadcrumbs} />
            </div>
            <div className="flex shrink-0 items-center gap-1 sm:gap-1.5">
                <HeaderCoinSearchLauncher />
                <SignalAlertCenter />
                <ThemeToggle />
            </div>
        </header>
    );
}