/**
 * BottomNav 底部导航组件 (移动端)
 * 设计稿参考: UIDesignSpec.md 3.6
 */
import React from 'react';
import { LucideIcon } from 'lucide-react';

export interface NavItem {
  id: string;
  label: string;
  icon: LucideIcon;
  href?: string;
  badge?: number;
}

export interface BottomNavProps {
  items: NavItem[];
  activeId: string;
  onItemClick?: (id: string) => void;
  className?: string;
}

export const BottomNav: React.FC<BottomNavProps> = ({
  items,
  activeId,
  onItemClick,
  className = '',
}) => {
  return (
    <nav
      className={`
        fixed bottom-0 left-0 right-0 z-bottom-nav
        flex justify-around items-center
        h-bottom-nav px-[21px] py-3
        safe-area-bottom
        ${className}
      `}
      style={{
        background: 'linear-gradient(180deg, transparent 0%, #0B0B0E 50%)',
      }}
    >
      {items.map((item) => {
        const isActive = item.id === activeId;
        const Icon = item.icon;

        return (
          <button
            key={item.id}
            onClick={() => onItemClick?.(item.id)}
            className={`
              flex flex-col items-center gap-1
              transition-colors duration-200
              ${isActive ? 'text-accent-indigo' : 'text-text-secondary'}
            `}
          >
            <div className="relative">
              <Icon size={24} />
              {item.badge !== undefined && item.badge > 0 && (
                <span
                  className="
                    absolute -top-1 -right-1
                    min-w-[16px] h-4 px-1
                    flex items-center justify-center
                    bg-accent-coral text-white
                    text-[10px] font-semibold
                    rounded-full
                  "
                >
                  {item.badge > 99 ? '99+' : item.badge}
                </span>
              )}
            </div>
            <span className="text-nav">{item.label}</span>
          </button>
        );
      })}
    </nav>
  );
};

export default BottomNav;