// ============================================================
// NavItem — 单个导航按钮
// 布局：图标（SVG）在上，文字在下
// ============================================================

import { useTheme } from '@/components/providers/ThemeProvider';
import type { NavItemConfig } from './types';

interface NavItemProps {
   item: NavItemConfig;
   onClick: (item: NavItemConfig) => void;
}

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

   return (
      <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>
   );
}
