duelfi_web/src/components/Header.tsx

"use client";

import Link from "next/link";
import Image from "next/image";
import { FaTelegram, FaXTwitter } from "react-icons/fa6";
import { useState } from "react";
import PrivyButton from "./PrivyButton";
import { URL_TELEGRAM, URL_TWITTER, URL_WHITEPAPER } from "@/shared/constants";
import SupportModal from "./SupportModal";

export default function Header() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [showSupportModal, setShowSupportModal] = useState(false);

  // Toggle the nav drawer
  const toggleDrawer = () => {
    setIsDrawerOpen(!isDrawerOpen);
  };

  return (
    <>
    <header className="w-full bg-[rgb(22,22,22)] shadow-md h-26">
      <div className="container mx-auto flex items-center justify-between px-3 h-full max-w-screen-xl w-full">
        {/* Logo */}
        <div className="flex items-center pr-15">
          <Image 
            src="/duelfiassets/logo.png" 
            alt="Logo" 
            width={100} 
            height={40}
            className="w-[100px] h-[40px]"
            priority
          />
        </div>

        {/* Navigation Links (hidden on mobile, visible on md+) */}
        <nav className="hidden md:flex gap-6 ml-6">
          <a
            href={URL_WHITEPAPER}
            target="_blank"
            rel="noopener noreferrer" 
            className="text-white transition-colors duration-[500ms] hover:text-[rgb(248,144,22)]"
          >
            Whitepaper
          </a>
          <button
            onClick={() => setShowSupportModal(true)}
            className="text-white transition-colors duration-[500ms] hover:text-[rgb(248,144,22)]"
          >
            Support
          </button>
        </nav>

        {/* Spacer (for centering) */}
        <div className="flex-grow"></div>

        {/* Socials & Login (hidden on mobile, visible on md+) */}
        <div className="hidden md:flex items-center gap-6">
        <a
          href={URL_TELEGRAM}
          target="_blank"
          rel="noopener noreferrer"
          className="transition-transform duration-300 hover:scale-120"
        >
          <Image
            src="/duelfiassets/telegram (1).png"
            alt="Telegram"
            width={40}
            height={40}
          />
        </a>
        <a
          href={URL_TWITTER}
          target="_blank"
          rel="noopener noreferrer"
          className="transition-transform duration-300 hover:scale-120"
        >
          <Image
            src="/duelfiassets/xlogo.png"
            alt="X (Twitter)"
            width={40}
            height={40}
          />
        </a>

          <PrivyButton></PrivyButton>
        </div>

        {/* Mobile-only view (Logo & Login) */}
        <div className="flex md:hidden items-center ">
          <PrivyButton></PrivyButton>
          
          <button
            onClick={toggleDrawer}
            className="text-white"
            aria-label="Open Menu"
          >
            <svg
              className="w-6 h-6"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M4 6h16M4 12h16M4 18h16"
              />
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile Drawer */}
      {isDrawerOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-50">
          <div className="absolute top-0 right-0 bg-[rgb(22,22,22)] w-64 h-full p-6">
            {/* Close button */}
            <button
              onClick={toggleDrawer}
              className="text-white mb-4"
              aria-label="Close Menu"
            >
              <svg
                className="w-6 h-6"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>

            {/* Mobile Navigation Links */}
            <div className="flex flex-col gap-6">
              <a
                href={URL_WHITEPAPER}
                target="_blank"
                rel="noopener noreferrer"
                className="text-white transition-colors duration-[500ms] hover:text-[rgb(248,144,22)]"
                onClick={() => setIsDrawerOpen(false)}
              >
                Whitepaper
              </a>
              <button
                onClick={() => {
                  setShowSupportModal(true);
                  setIsDrawerOpen(false);
                }}
                className="text-white transition-colors duration-[500ms] hover:text-[rgb(248,144,22)] text-left"
              >
                Support
              </button>

              {/* Socials */}
              <a
                href={URL_TELEGRAM}
                target="_blank"
                rel="noopener noreferrer"
                className="text-white transition-colors duration-[500ms] hover:text-[rgb(248,144,22)]"
                onClick={() => setIsDrawerOpen(false)}
              >
                <FaTelegram size={24} />
              </a>
              <a
                href={URL_TWITTER}
                target="_blank"
                rel="noopener noreferrer"
                className="text-white transition-colors duration-[500ms] hover:text-[rgb(248,144,22)]"
                onClick={() => setIsDrawerOpen(false)}
              >
                <FaXTwitter size={24} />
              </a>
            </div>
          </div>
        </div>
      )}
    </header>
    <SupportModal isOpen={showSupportModal} onClose={() => setShowSupportModal(false)} />
    </>
  );
}