"use client"

import { Link, usePathname, useRouter } from "@/i18n/navigation";
import { Heart, ShoppingCartIcon, ArrowLeft, Home } from "lucide-react";

import { Separator } from "@/components/ui/separator";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { LanguageSwitcher } from "@/components/appearance/language";

import { Notifications } from "./notifications";
import { User } from "./user";
import { Cart } from "@/components/app/cart";
import { Button } from "@/components/ui/button";

export function DashboardHeader() {
    const pathname = usePathname();
    const router = useRouter();

    const isProfile = pathname === "/dashboard/profile";

    if (pathname.includes("fullscreen")) return null;
    return (
        <header className="flex h-16 items-center justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 bg-purple-400 pe-2 md:pe-4">
            <div className="flex items-center gap-1 md:gap-2 px-2 md:px-4">
                {isProfile ? (
                    <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => router.back()}
                        className="-ml-1  bg-white text-black"
                    >
                        <ArrowLeft className="size-5 rtl:rotate-180" />
                    </Button>
                ) : (
                    <SidebarTrigger className="-ml-1 hover:bg-white hover:text-black text-white" />
                )}
                <Button variant={"ghost"} size={"icon"} asChild className="hover:bg-white hover:text-black text-white ms-1">
                    <Link href="/">
                        <Home className="size-5" />
                    </Link>
                </Button>
                <Separator
                    orientation="vertical"
                    className="mr-2 hidden md:block data-[orientation=vertical]:h-4 bg-white/50 w-[1px]"
                />
            </div>
            <div className="flex items-center gap-1 md:gap-2">
                <div className="bg-black/20 text-white rounded flex items-center gap-2 md:gap-4 h-8 px-2 md:px-3">
                    <Cart>
                        <Button variant={"ghost"} size={"sm"} className="w-5 text-white !bg-transparent px-0">
                            <ShoppingCartIcon className="size-4" />
                        </Button>
                    </Cart>
                    {/* <Link href={'/dashboard/wishlist'} className="hover:text-black">
                        <Heart className="size-4 mb-0.5" />
                    </Link> */}
                    <Notifications />
                </div>
                <LanguageSwitcher seeLang={true} className="px-2 md:px-4" />
                <User />
            </div>
        </header>
    )
}