import ThemeToggle from "@/components/layout/ThemeToggle/theme-toggle";
import { cn } from "@/lib/utils";
import { MobileSidebar } from "./mobile-sidebar";
import { UserNav } from "./user-nav";
import Link from "next/link";
import Image from "next/image";

export default function Header() {
  return (
    <div className="fixed top-0 left-0 right-0 supports-backdrop-blur:bg-background/60 border-b bg-background/95 backdrop-blur z-20">
      <nav className="h-14 flex items-center justify-between px-4">
        <div className="hidden lg:block">
          <Link href="/dashboard" className="inline-block w-fit">
          <Image
            src="/Skilld AI Logos/Skilld Logo-colour on black.png"
            alt="Skilld Logo"
            width={100}
            height={30}
            className="hidden dark:block h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
          />
          <Image
            src="/Skilld AI Logos/Skilld Logo-colour.png"
            alt="Skilld Logo"
            width={100}
            height={30}
            className="dark:hidden h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
          />
        </Link>
        </div>
        <div className={cn("block lg:!hidden")}>
          <MobileSidebar />
        </div>

        <div className="flex items-center gap-2">
          <UserNav />
          <ThemeToggle />
        </div>
      </nav>
    </div>
  );
}