PrivyDrop/frontend/components/web/Header.tsx

"use client";
import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import Image from 'next/image';
import { Menu, X } from 'lucide-react';
import LanguageSwitcher from '@/components/LanguageSwitcher';
import { Messages } from '@/types/messages'

interface HeaderProps {
  messages: Messages;
  lang: string;
}

const Header = ({ messages, lang }: HeaderProps) => {
  const pathname = usePathname();
  const [isOpen, setIsOpen] = useState(false);

  const navItems = [
    { href: `/${lang}`, label: messages.text.Header.Home_dis },
    { href: `/${lang}/blog`, label: messages.text.Header.Blog_dis },
    { href: `/${lang}/about`, label: messages.text.Header.About_dis },
    { href: `/${lang}/help`, label: messages.text.Header.Help_dis },
    { href: `/${lang}/faq`, label: messages.text.Header.FAQ_dis },
    { href: `/${lang}/terms`, label: messages.text.Header.Terms_dis },
    { href: `/${lang}/privacy`, label: messages.text.Header.Privacy_dis },
  ];

  return (
    <header className="bg-background border-b sticky top-0 z-50">
      <div className="container mx-auto px-4 py-4">
        <div className="flex justify-between items-center">
          <Link href={`/${lang}`} className="flex items-center space-x-2">
            <Image src="/logo.png" alt="SecureShare Logo" width={40} height={40} priority />
            <span className="font-bold text-xl hidden sm:inline">SecureShare</span>
          </Link>

          {/* 桌面端导航和语言切换 */}
          <div className="hidden md:flex items-center space-x-4">
            <nav>
              <ul className="flex space-x-2">
                {navItems.map((item) => (
                  <li key={item.href}>
                    <Button
                      asChild
                      variant="ghost"
                      size="sm"
                      className={cn(
                        "hover:bg-muted",
                        pathname === item.href && "bg-muted"
                      )}
                    >
                      <Link href={item.href}>{item.label}</Link>
                    </Button>
                  </li>
                ))}
              </ul>
            </nav>
            <LanguageSwitcher />
          </div>

          {/* 移动端菜单按钮 */}
          <div className="md:hidden flex items-center space-x-2">
            <LanguageSwitcher />
            <button
              className="p-2"
              onClick={() => setIsOpen(!isOpen)}
              aria-label="Toggle menu"
              >
              {isOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>

        {/* 移动端导航菜单 */}
        {isOpen && (
          <nav className="md:hidden mt-4">
            <ul className="flex flex-col space-y-2">
              {navItems.map((item) => (
                <li key={item.href}>
                  <Button
                    asChild
                    variant="ghost"
                    className={cn(
                      "w-full justify-start",
                      pathname === item.href && "bg-muted"
                    )}
                    onClick={() => setIsOpen(false)}
                  >
                    <Link href={item.href}>{item.label}</Link>
                  </Button>
                </li>
              ))}
            </ul>
          </nav>
        )}
      </div>
    </header>
  );
};

export default Header;