import { useNavigate } from "react-router-dom";
import { ChevronLeft } from "lucide-react";
import { Button } from "./ui/button";
import { PlanetMark } from "./Logo";
import { ProfileMenu } from "./ProfileMenu";

// Consistent sticky page header: brand logo (or back) + title on the left,
// the profile/settings menu on the right.
export function PageHeader({
  title,
  back = false,
}: {
  title: string;
  back?: boolean;
}) {
  const navigate = useNavigate();
  return (
    <header className="sticky top-4 z-40 flex items-center justify-between gap-2 mb-2">
      <div className="flex items-center bg-card/60 backdrop-blur-xl rounded-full shadow-sm p-1 pr-5 border border-black/5 dark:border-white/10">
        {back ? (
          <Button
            variant="ghost"
            size="icon"
            onClick={() => navigate(-1)}
            className="rounded-full hover:bg-black/10 dark:hover:bg-white/10"
          >
            <ChevronLeft className="w-6 h-6" />
          </Button>
        ) : (
          <button
            onClick={() => navigate("/")}
            className="active:scale-95 transition-transform shrink-0"
            aria-label="Accueil"
          >
            <PlanetMark size={30} />
          </button>
        )}
        <h1 className="text-xl font-black tracking-tighter ml-2 drop-shadow-sm">
          {title}
        </h1>
      </div>
      <ProfileMenu />
    </header>
  );
}
