import { useLocation } from "react-router-dom";

const titles: Record<string, string> = {
  "": "Dashboard",
  stacks: "Stacks",
  networks: "Networks",
  images: "Images",
  templates: "Templates",
  settings: "Settings",
};

export function Topbar() {
  const { pathname } = useLocation();
  const segment = pathname.split("/")[1] ?? "";
  const title = titles[segment] ?? "StackPilot";

  return (
    <header className="flex h-14 items-center justify-between border-b border-slate-200 bg-card px-6 dark:border-slate-700 dark:bg-card-dark">
      <h1 className="text-base font-semibold">{title}</h1>
    </header>
  );
}