"use client";

/**
 * SaleShareHeader — топбар самостоятельного продукта «Поиск домов».
 *
 * В отличие от `Topbar.tsx` (бренд «Мера» + табы оценки/истории/скраперов)
 * это минимальная шапка БЕЗ марки «Мера» и без продуктовых табов: только
 * название продукта слева и личный кабинет (UserMenu) справа, чтобы
 * login/logout продолжали работать. Layout/токены переиспользуются из
 * `trade-in.css` (`.topbar` / `.topbar-inner` / `.brand` / `.top-nav`),
 * глиф-бейдж `.brand-mark` нейтральный (домик), не Mera-специфичный.
 */

import { UserMenu } from "@/components/auth/UserMenu";

/** Нейтральный глиф «дом» для бейджа продукта (currentColor, в стиле
    .brand-mark-svg — тёмный фон даёт CSS-бейдж .brand-mark). */
function HouseMark() {
  return (
    <svg
      viewBox="0 0 28 28"
      className="brand-mark-svg"
      aria-hidden="true"
      focusable="false"
    >
      <path
        d="M5 13l9-7 9 7"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinejoin="round"
        strokeLinecap="round"
      />
      <path
        d="M7.5 11.5V21h13v-9.5"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinejoin="round"
        strokeLinecap="round"
      />
    </svg>
  );
}

export function SaleShareHeader() {
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <div className="brand">
          <span className="brand-mark">
            <HouseMark />
          </span>
          <span className="brand-product">Поиск домов</span>
        </div>
        {/* Только личный кабинет — никакой Mera-навигации. `.top-nav`
            переиспользуется ради margin-left:auto. В dev (401) или до /me
            UserMenu сам рендерит null. */}
        <div className="top-nav">
          <UserMenu />
        </div>
      </div>
    </header>
  );
}
