import React from 'react';
import { Package, Warehouse, Plus } from 'lucide-react';
import { useResponsive } from '../../hooks/useResponsive';

interface SubMenuItem {
  id: string;
  label: string;
  icon: typeof Package;
}

interface WarehouseNavProps {
  activeSubMenu: string;
  onSubMenuChange: (menu: string) => void;
}

const subMenus: SubMenuItem[] = [
  { id: 'products', label: '产品管理', icon: Package },
  { id: 'inventory', label: '库存管理', icon: Warehouse },
  { id: 'in_records', label: '入库记录', icon: Plus }
];

export function WarehouseNav({
  activeSubMenu,
  onSubMenuChange
}: WarehouseNavProps) {
  const { isMobile } = useResponsive();

  return (
    <>
      {/* 二级菜单：功能模块 */}
      <div className={`flex gap-1 mb-4 sm:mb-6 bg-gray-100 p-1.5 sm:p-2 rounded-xl ${isMobile ? 'overflow-x-auto scrollbar-hide' : ''}`}>
        {subMenus.map(menu => {
          const Icon = menu.icon;
          const isActive = activeSubMenu === menu.id;
          return (
            <button
              key={menu.id}
              onClick={() => onSubMenuChange(menu.id)}
              className={`flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all whitespace-nowrap flex-shrink-0 ${
                isActive
                  ? 'bg-white text-blue-600 shadow-sm'
                  : 'text-gray-600 hover:text-gray-900'
              }`}
            >
              <Icon className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
              {menu.label}
            </button>
          );
        })}
      </div>
    </>
  );
}
