"use client";

import { usePathname } from "next/navigation";

const TITLES: Array<{ test: (p: string) => boolean; title: string; sub?: string }> = [
  { test: (p) => p === "/" || p.startsWith("/d/"), title: "Today", sub: "Dashboard" },
  {
    test: (p) => p === "/calendar" || p.startsWith("/calendar/"),
    title: "Calendar",
    sub: "household + private",
  },
  { test: (p) => p === "/lists" || p.startsWith("/lists/"), title: "Lists" },
  { test: (p) => p === "/notes" || p.startsWith("/notes/"), title: "Notes" },
  { test: (p) => p === "/settings" || p.startsWith("/settings/"), title: "Settings" },
  { test: (p) => p === "/login", title: "Sign in" },
];

export function TopbarTitle() {
  const pathname = usePathname() ?? "";
  const match = TITLES.find((t) => t.test(pathname)) ?? { title: "famapp" };

  return (
    <div style={{ minWidth: 0 }}>
      <h1
        className="serif"
        style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
      >
        {match.title}
      </h1>
      {"sub" in match && match.sub && <div className="crumb">{match.sub}</div>}
    </div>
  );
}