import { IconHome, IconSearch, IconScan, IconBell, IconUser } from './icons';
import './BottomNav.css';

function BottomNav({ activeTab, onChange, isLoggedIn, badgeCount }) {
  const tabs = [
    { id: 'home', label: 'Inicio', Icon: IconHome },
    { id: 'search', label: 'Buscar', Icon: IconSearch },
    { id: 'scan', label: 'Escanear', Icon: IconScan, elevated: true },
    { id: 'alerts', label: 'Avisos', Icon: IconBell, badge: badgeCount > 0, badgeCount },
    { id: 'profile', label: 'Usuario', Icon: IconUser },
  ];

  return (
    <nav className="bottom-nav" aria-label="Navegación principal">
      {tabs.map(({ id, label, Icon, elevated, badge, badgeCount: count, requiresAuth }) => {
        const disabled = requiresAuth && !isLoggedIn;
        const isActive = activeTab === id;
        return (
          <button
            key={id}
            type="button"
            className={[
              'bottom-nav-item',
              isActive ? 'active' : '',
              disabled ? 'disabled' : '',
              elevated ? 'nav-elevated' : '',
            ].filter(Boolean).join(' ')}
            onClick={() => {
              if (!disabled) onChange(id);
            }}
            disabled={disabled}
            aria-current={isActive ? 'page' : undefined}
            aria-label={label}
          >
            {elevated ? (
              <div className="nav-fab">
                <Icon size={28} />
              </div>
            ) : (
              <span className="nav-icon-wrap">
                <Icon size={26} />
                {badge && (
                  <span className="nav-badge">{count}</span>
                )}
              </span>
            )}
            <span className={`nav-label${isActive && !elevated ? ' nav-label--active' : ''}`}>
              {label}
            </span>
            {isActive && !elevated && <span className="nav-indicator" />}
          </button>
        );
      })}
    </nav>
  );
}

export default BottomNav;