import { useVoiceStore } from '../stores/voice.ts';
import { ThemeToggle } from './ThemeToggle.tsx';

interface MobileNavProps {
  activeTab: 'servers' | 'channels' | 'chat' | 'members';
  onTabChange: (tab: 'servers' | 'channels' | 'chat' | 'members') => void;
  onToggleDrawer: () => void;
}

export function MobileNav({ activeTab, onTabChange, onToggleDrawer }: MobileNavProps) {
  const isConnected = useVoiceStore((state: any) => state.isConnected);

  const tabs = [
    { id: 'servers' as const, label: '[=]', title: 'Servers' },
    { id: 'channels' as const, label: '[#]', title: 'Channels' },
    { id: 'chat' as const, label: '[_]', title: 'Chat' },
    { id: 'members' as const, label: '[@]', title: 'Members' },
  ];

  return (
    <div className="md:hidden fixed bottom-0 left-0 right-0 bg-gb-bg-h border-t border-gb-bg-t z-40">
      <div className="flex items-center justify-around py-2">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => {
              if (tab.id === 'servers' || tab.id === 'channels') {
                onToggleDrawer();
              }
              onTabChange(tab.id);
            }}
            className={`
              px-3 py-1 text-xs font-mono transition-colors
              ${activeTab === tab.id
                ? 'text-gb-orange'
                : 'text-gb-fg-f hover:text-gb-fg'
              }
            `}
            title={tab.title}
          >
            {tab.label}
          </button>
        ))}
        {isConnected && (
          <div className="w-1.5 h-1.5 rounded-full bg-gb-green animate-pulse" title="In voice" />
        )}
        <ThemeToggle />
      </div>
      {/* Safe area for phones with bottom notch */}
      <div className="h-[env(safe-area-inset-bottom)]" />
    </div>
  );
}