"use client";

import React, { useState } from "react";
import type { NavItem } from "../types";
import { LangSwitch } from "./LangSwitch";

export interface MainNavProps {
  items: NavItem[];
  basePath?: string; // e.g. /zh-CN
  locale?: string; // zh-CN | en
}

export function MainNav({ items, basePath = "", locale = "zh-CN" }: MainNavProps) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const text = {
    searchPlaceholder: locale === "en" ? "Search products/content" : "搜索产品/内容",
    cart: locale === "en" ? "Cart" : "购物车",
  } as const;
  
  return (
    <header className="w-full bg-white border-b border-gray-100 relative">
      <div className="mx-auto max-w-screen-2xl px-4 h-16 flex items-center justify-between">
        <a href="/" className="font-semibold text-gray-900 text-lg">LOG</a>
        
        {/* PC端导航菜单 */}
        <nav className="hidden md:flex items-center gap-6">
          {items.map((item) => (
            <a key={item.label} href={`${basePath}${item.href}`} className="text-gray-700 hover:text-gray-900">
              {item.label}
            </a>
          ))}
        </nav>
        
        <div className="flex items-center gap-3 min-w-0">
          {/* PC端搜索框 */}
          <input
            type="search"
            placeholder={text.searchPlaceholder}
            className="hidden md:block w-64 max-w-full rounded border border-gray-200 px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
          />
          <a href={`${basePath}/cart`} className="text-gray-700 hover:text-gray-900">{text.cart}</a>
          <LangSwitch />
          
          {/* 移动端菜单按钮 */}
          <button
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="md:hidden p-2 text-gray-700 hover:text-gray-900 focus:outline-none"
            aria-label="Toggle menu"
          >
            <svg
              className="w-6 h-6"
              fill="none"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              {mobileMenuOpen ? (
                <path d="M6 18L18 6M6 6l12 12" />
              ) : (
                <path d="M4 6h16M4 12h16M4 18h16" />
              )}
            </svg>
          </button>
        </div>
      </div>
      
      {/* 移动端导航菜单 */}
      {mobileMenuOpen && (
        <div className="md:hidden bg-white border-t border-gray-100">
          <nav className="mx-auto max-w-screen-2xl px-4 py-4 space-y-2">
            {/* 移动端搜索框 */}
            <input
              type="search"
              placeholder={text.searchPlaceholder}
              className="w-full rounded border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
            />
            {/* 导航项 */}
            {items.map((item) => (
              <a
                key={item.label}
                href={`${basePath}${item.href}`}
                className="block py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded px-2"
                onClick={() => setMobileMenuOpen(false)}
              >
                {item.label}
              </a>
            ))}
          </nav>
        </div>
      )}
    </header>
  );
}