import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { LogOut, Plus, Home, User } from 'lucide-react';

export default function Navbar() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

  if (!user) return null;

  return (
    <nav className="sticky top-0 z-50 border-b bg-white">
      <div className="mx-auto flex h-12 max-w-5xl items-center justify-between px-4">
        <Link to="/feed" className="text-base font-semibold tracking-tight">
          Catstagram
        </Link>

        <div className="flex items-center gap-0.5">
          <Link to="/feed" className="flex h-9 w-9 items-center justify-center rounded hover:bg-secondary transition-colors">
            <Home className="h-4 w-4" />
          </Link>
          <Link to="/upload" className="flex h-9 w-9 items-center justify-center rounded hover:bg-secondary transition-colors">
            <Plus className="h-4 w-4" />
          </Link>
          <Link to="/profile" className="flex h-9 w-9 items-center justify-center rounded hover:bg-secondary transition-colors">
            <Avatar className="h-6 w-6">
              <AvatarFallback className="text-[9px] bg-foreground text-background">
                {user.username.charAt(0).toUpperCase()}
              </AvatarFallback>
            </Avatar>
          </Link>
          <button
            onClick={() => { logout(); navigate('/login'); }}
            className="flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
          >
            <LogOut className="h-4 w-4" />
          </button>
        </div>
      </div>
    </nav>
  );
}