import { Link } from "react-router-dom";
import { BrandMark } from "../ui/BrandMark";
import { useI18n } from "../../i18n/I18nContext";
import { AccountMenu } from "./AccountMenu";
import { BellMenu } from "./BellMenu";
import { UsagePlanWidget } from "./UsagePlanWidget";

export function Topbar() {
  const { t, locale } = useI18n();

  return (
    <header className="hb-topbar">
      <Link to="/app/today" className="hb-topbar__brand" title={t("app.tagline")}>
        <BrandMark size={32} className="hb-topbar__mark" />
        <span className="hb-topbar__title">
          <span className="hb-topbar__name">{t("app.name")}</span>
          {locale === "zh-TW" ? (
            <span className="hb-topbar__en display-en">{t("app.nameEn")}</span>
          ) : (
            <span className="hb-topbar__en">{t("app.nameZh")}</span>
          )}
        </span>
      </Link>
      <div className="hb-topbar__actions">
        <div className="hb-topbar__cluster" role="group" aria-label={t("nav.navigate")}>
          <UsagePlanWidget />
          <BellMenu />
          <AccountMenu />
        </div>
      </div>
    </header>
  );
}
