import { Link } from "react-router-dom";
import { LogOut } from "lucide-react";
import { useAuth } from "@/contexts/AuthContext";
import orionLogo from "@/assets/orion-logo.svg";

/** Minimal header: logo and logout only */
export function HeaderMinimal() {
  const { logout, loggingOut } = useAuth();

  const handleLogout = async () => {
    await logout();
  };

  return (
    <nav className="sticky top-0 z-50 bg-background border-b border-border">
      <div className="container mx-auto px-4 h-12 flex items-center justify-between">
        <Link to="/" className="shrink-0">
          <img src={orionLogo} alt="Orion" className="h-6" />
        </Link>
        <button
          type="button"
          onClick={handleLogout}
          disabled={loggingOut}
          className="text-sm text-muted-foreground hover:text-foreground disabled:opacity-50"
        >
          {loggingOut ? "Logging out…" : "Log out"}
        </button>
      </div>
    </nav>
  );
}