/* Surgr App — Bottom Tab Bar */
const { Icons: TabIcons } = window.SurgrAppKit;

function TabBar({ active, onChange, hidden = false }) {
  if (hidden) return null;

  const tabs = [
    { id: 'dashboard', label: 'Início',    icon: TabIcons.Home },
    { id: 'history',   label: 'Treino',    icon: TabIcons.Dumbbell },
    { id: 'trainer',   label: 'Treinador', icon: TabIcons.Brain },
    { id: 'profile',   label: 'Perfil',    icon: TabIcons.User },
  ];

  return (
    <nav style={{
      position: 'absolute',
      bottom: 0, left: 0, right: 0,
      background: 'var(--surgr-bg-card)',
      borderTop: '1px solid var(--surgr-border)',
      display: 'flex',
      justifyContent: 'space-around',
      padding: '8px 12px 16px',
      zIndex: 100,
    }}>
      {tabs.map(tab => {
        const isActive = tab.id === active;
        const IconComp = tab.icon;
        return (
          <button key={tab.id} onClick={() => onChange?.(tab.id)} style={{
            background: 'none', border: 'none',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
            color: isActive ? 'var(--surgr-accent)' : 'var(--surgr-text-muted)',
            cursor: 'pointer', flex: 1,
            fontFamily: 'var(--surgr-font-body)',
            padding: 0,
          }}>
            <div style={{
              padding: 8,
              borderRadius: 12,
              background: isActive ? 'var(--surgr-accent-bg)' : 'transparent',
              transition: 'all var(--surgr-dur-base) var(--surgr-ease-out)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
              <IconComp size={24} strokeWidth={1.5} />
            </div>
            <span style={{
              fontSize: 10,
              fontWeight: isActive ? 700 : 500,
              opacity: isActive ? 1 : 0.7,
            }}>{tab.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

window.SurgrAppKit.TabBar = TabBar;