task-manager/client/src/components/BottomNavigation.tsx

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Home, Calendar, LayoutGrid, Plus, Settings } from 'lucide-react';
import { useState } from 'react';

interface BottomNavigationProps {
  onTabChange?: (tab: string) => void;
  onCreateTask?: () => void;
  activeTab?: string;
}

export default function BottomNavigation({ onTabChange, onCreateTask, activeTab = 'tasks' }: BottomNavigationProps) {
  const [currentTab, setCurrentTab] = useState(activeTab);

  const tabs = [
    { id: 'tasks', label: 'Tasks', icon: Home, badge: 3 },
    { id: 'calendar', label: 'Calendar', icon: Calendar },
    { id: 'create', label: 'Create', icon: Plus, isCreate: true },
    { id: 'kanban', label: 'Board', icon: LayoutGrid },
    { id: 'templates', label: 'Templates', icon: Settings }
  ];

  const handleTabClick = (tabId: string, isCreate?: boolean) => {
    if (isCreate) {
      onCreateTask?.();
      console.log('Create task triggered');
      return;
    }
    
    setCurrentTab(tabId);
    onTabChange?.(tabId);
    console.log('Tab changed to:', tabId);
  };

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border z-40">
      <div className="flex items-center justify-around px-2 py-2 safe-area-inset-bottom">
        {tabs.map((tab) => {
          const isActive = currentTab === tab.id && !tab.isCreate;
          const Icon = tab.icon;
          
          return (
            <Button
              key={tab.id}
              variant={tab.isCreate ? "default" : isActive ? "secondary" : "ghost"}
              size={tab.isCreate ? "icon" : "sm"}
              onClick={() => handleTabClick(tab.id, tab.isCreate)}
              className={`relative flex flex-col gap-1 h-auto py-2 px-3 ${
                tab.isCreate 
                  ? 'w-12 h-12 rounded-full shadow-lg' 
                  : 'flex-1 max-w-[80px]'
              }`}
              data-testid={`nav-${tab.id}`}
            >
              <Icon className={`${
                tab.isCreate ? 'w-6 h-6' : 'w-5 h-5'
              }`} />
              
              {!tab.isCreate && (
                <span className="text-xs font-medium">
                  {tab.label}
                </span>
              )}
              
              {tab.badge && !tab.isCreate && (
                <Badge 
                  variant="destructive" 
                  className="absolute -top-1 -right-1 w-5 h-5 flex items-center justify-center text-xs p-0 min-w-[20px]"
                  data-testid={`badge-${tab.id}`}
                >
                  {tab.badge}
                </Badge>
              )}
            </Button>
          );
        })}
      </div>
    </div>
  );
}