news/app/components/news/header/TopNav.tsx

import { Search } from 'lucide-react';
import React, { useState, useEffect } from 'react';
import { Button } from '@/ui/button';
interface MenuItem {
  label: string;
  key: string;
  sectionId:string;
}

interface TopNavProps {
  menuItems?: MenuItem[];
  activeKey?: string;
  onSearch?: (keyword: string) => void;
  onItemClick?: (key: string) => void;
}

export function TopNav({
  menuItems = [
    { label: '首页', key: 'home', sectionId:'home' },
    { label: '烽火动态', key: 'news', sectionId:'fireNews' },
    { label: '烽火铸魂', key: 'soul', sectionId:'soul' },
    { label: '烽火训练', key: 'training', sectionId:'training' },
    { label: '联系热线', key: 'hotline', sectionId:'hotline' },
    { label: '综合服务', key: 'service', sectionId:'service' },
  ],
  activeKey: externalActiveKey,
  onSearch,
  onItemClick,
}: TopNavProps) {
  const [internalActiveKey, setInternalActiveKey] = useState('home');
  const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey;
  const [searchKeyword, setSearchKeyword] = useState('');


  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch?.(searchKeyword);
    
  };

  const handleItemClick = (item: MenuItem) => {
    if (externalActiveKey === undefined) {
      setInternalActiveKey(item.key);
    }

        // 如果有对应的 sectionId，则滚动到该区域
    // if (item.sectionId) {
    //   const element = document.getElementById(item.sectionId);
    //   if (element) {
    //     element.scrollIntoView({ 
    //       behavior: 'smooth', // 平滑滚动
    //       block: 'start'      // 滚动到顶部对齐
    //     });
    //   }
    // }

    onItemClick?.(item.key);
  };

  return (
    // 将组件宽度调整为1514px，并保持居中
    <div className="h-full w-full mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#1f79bf]">
      {/* 搜索框与导航菜单组合 */}
      <div className="flex items-center justify-start gap-30 ml-45 ">
        {/* 导航菜单 */}
        <ul className="flex space-x-20 relative mr-10">
          {menuItems.map((item) => {
            const isActive = currentActiveKey === item.key;
            return (
              <li key={item.key} className="relative">
                <button
                  onClick={() => handleItemClick(item)}
                  className={`px-4 py-2 text-2xl transition-all duration-500 relative z-10 ${isActive ? 'text-white font-bold' : 'text-gray-600 hover:font-bold cursor-pointer'
                    }`}
                >
                  {/* 激活状态背景层 */}
                  {isActive && (
                    <span className="absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-700 transform skew-x-12  rounded-none z-0"></span>
                  )}
                  <span className="relative z-20">{item.label}</span>
                </button>
              </li>
            );
          })}
        </ul>
        {/* 搜索框 */}

        <div className="relative overflow-hidden bg-gray-100 ">
          <Button variant="default" className="absolute rounded-none right-0 top-1/2 transform -translate-y-1/2 bg-[#1f79bf] hover:bg-[#1a68a0] text-white border-0 "
            onClick={handleSearchSubmit}

          >
            <Search className="w-5 h-5" />
          </Button>

          <input type="text"
            placeholder='请输入关键词'
            value={searchKeyword}
            onChange={(e) => setSearchKeyword(e.target.value)}
            className="pl-5 pr-4 py-2 text-sm h-full w-10 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 transition-all duration-200 hover:shadow-sm" />
        </div>


        



      </div>
    </div>
  );
};