// ============================================================
// NavItem — 单个导航按钮
// 布局：图标（SVG）在上，文字在下
// 支持 Badge 角标（用于公告未读数量等通知场景）
// ============================================================

import { Badge } from 'antd';
import { useTheme } from '@/app/providers/ThemeProvider';
import type { NavItemConfig } from '../model/types';

interface NavItemProps {
   item: NavItemConfig;
   onClick: (item: NavItemConfig) => void;
   /** 角标数量（> 0 时在按钮右上角显示 Badge） */
   badgeCount?: number;
}

export function NavItem({ item, onClick, badgeCount }: NavItemProps) {
   const { isDark } = useTheme();
   const isLogout = item.key === 'logout';

   const button = (
      <button
         type="button"
         onClick={() => onClick(item)}
         title={item.label}
         className="navbar-no-drag flex flex-col items-center justify-center gap-0.5 px-3 py-1 rounded-md
                 transition-all duration-200 cursor-pointer border-0
                 hover:brightness-95 active:scale-95"
         style={{
            background: isLogout ? 'transparent' : 'transparent',
            minWidth: 56,
            minHeight: 48,
         }}
      >
         {/* SVG 图标 — 内联渲染，currentColor 继承父元素 color */}
         {item.iconSrc && (
            <span
               className="w-5 h-5 inline-block opacity-80"
               style={{ color: '#6366F1' }}
               dangerouslySetInnerHTML={{ __html: item.iconSrc }}
            />
         )}

         {/* 文字标签 */}
         <span
            className="text-xs leading-tight whitespace-nowrap select-none"
            style={{
               color: isLogout ? (isDark ? '#F87171' : '#EF4444') : isDark ? '#E8E6F0' : '#1E1B4B',
            }}
         >
            {item.label}
         </span>
      </button>
   );

   // 有角标时包裹 Badge
   if (badgeCount && badgeCount > 0) {
      return (
         <Badge count={badgeCount} overflowCount={99} size="small" offset={[-4, 4]}>
            {button}
         </Badge>
      );
   }

   return button;
}
