'use client';

import React from 'react';
import Image from 'next/image';
import { useSelectedLayoutSegment } from 'next/navigation';
import logo from '@/public/images/kx3dex_radio_logo.png'

import useScroll from '@/hooks/use-scroll';
import { cn } from '@/lib/utils';

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/navigation-menu"

const Header = () => {
  const scrolled = useScroll(5);
  const selectedLayout = useSelectedLayoutSegment();

  return (
    <div
      className={cn(
        `sticky inset-x-0 top-0 z-30 w-full transition-all border-b border-gray-200`,
        {
          'border-b border-gray-200  backdrop-blur-lg': scrolled,
          'border-b border-gray-200 mb-5': selectedLayout,
        },
      )}
    >
      <div className="flex items-center justify-between p-4">
        <div className="flex items-center space-x-4">
          <Image
          src={logo}
          width={100}
          height={100}
          alt="Logo  Image"
          priority
          className="rounded-lg border"
          />
        </div>

        <div className="hidden md:block">
          <NavigationMenu>
            <NavigationMenuLink href="/" className="font-bold text-3xl pr-5">Home</NavigationMenuLink>
            <NavigationMenuLink href="/dexnet" className="font-bold text-3xl pr-5">DexNet</NavigationMenuLink>
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuTrigger className="font-bold text-3xl pr-5">Go Kits</NavigationMenuTrigger>
                <NavigationMenuContent className="flex flex-col min-w-[300px] p-2 absolute right-0">
                  <NavigationMenuLink href="/projects/go-kit-command-center" className="font-bold">Go Kit (Command Center)</NavigationMenuLink>
                </NavigationMenuContent>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenu>
        </div>
      </div>
    </div>
  );
};

export default Header;