import { NavLink } from 'react-router-dom';
import { Home, PlusSquare, User, CircleUser } from 'lucide-react';
import { useAuth } from '../context/AuthContext';
import { cn } from '../lib/utils';

const navItems = [
  { path: '/', icon: Home, label: 'Feed' },
  { path: '/create', icon: PlusSquare, label: 'Create' },
  { path: '/profile', icon: User, label: 'Profile' },
];

export default function NavigationBar() {
  const { user } = useAuth();

  return (
    <nav className="fixed bottom-0 left-0 right-0 h-16 bg-canvas border-t border-hairline z-50">
      <div className="max-w-md mx-auto h-full flex justify-around items-center">
        {navItems.map((item) => {
            const path = item.path === '/profile' && user?.username ? `/profile/${user.username}` : item.path;
            return (
              <NavLink
                key={item.path}
                to={path}
                className={({ isActive }) =>
                  cn(
                    'flex flex-col items-center justify-center text-muted-soft transition-colors',
                    isActive && 'text-ink'
                  )
                }
              >
                <item.icon className="h-6 w-6" strokeWidth={2} />
              </NavLink>
            );
        })}
      </div>
    </nav>
  );
}