import { authClient } from "@lib/auth.js";
import { MessageSquare } from "lucide-react";

function BottomNav() {
  const { data: session } = authClient.useSession();

  return (
    <nav
      aria-label="Primary"
      className="relative z-20 h-14 shrink-0 flex items-stretch border-t border-line backdrop-blur-md"
      style={{ background: "rgba(10,10,11,0.85)", paddingBottom: "env(safe-area-inset-bottom)" }}
    >
      <BottomNavItem to="/" end label="Chats">
        <MessageSquare size={22} strokeWidth={1.75} />
      </BottomNavItem>
      <BottomNavItem to="/profile" label="Profile">
        <NavAvatar name={session?.user?.name || "You"} />
      </BottomNavItem>
    </nav>
  );
}

window.BottomNav = BottomNav;