import Link from "next/link";
import type { AppDictionary, Locale } from "@/lib/site-content";

function localize(locale: Locale, path: string) {
  if (!path || path === "/") {
    return `/${locale}`;
  }
  return `/${locale}${path}`;
}

export function SiteChrome({
  children,
  dictionary,
  locale,
}: {
  children: React.ReactNode;
  dictionary: AppDictionary;
  locale: Locale;
}) {
  return (
    <div className="site-shell">
      <header className="site-header">
        <div className="brand-lockup">
          <Link className="brand-mark" href={localize(locale, "/")}>
            PA
          </Link>
          <div>
            <strong>{dictionary.brand.name}</strong>
            <span>{dictionary.brand.subtitle}</span>
          </div>
        </div>

        <nav className="main-nav">
          <Link href={localize(locale, "/")}>{dictionary.nav.home}</Link>
          <Link href={localize(locale, "/docs")}>{dictionary.nav.docs}</Link>
          <Link href={localize(locale, "/console")}>{dictionary.nav.console}</Link>
          <Link href={localize(locale, "/pricing")}>{dictionary.nav.pricing}</Link>
        </nav>

        <div className="header-actions">
          <div className="locale-switch">
            <Link
              className={locale === "zh" ? "locale-active" : ""}
              href={localize("zh", "/")}
            >
              中文
            </Link>
            <Link
              className={locale === "en" ? "locale-active" : ""}
              href={localize("en", "/")}
            >
              EN
            </Link>
          </div>
          <Link className="button button-light button-small" href={localize(locale, "/login")}>
            {dictionary.nav.login}
          </Link>
        </div>
      </header>

      <main className="main-content">{children}</main>

      <footer className="site-footer">
        <div>
          <strong>{dictionary.brand.name}</strong>
          <p>{dictionary.footer.copy}</p>
        </div>
        <div className="footer-links">
          <Link href={localize(locale, "/docs")}>{dictionary.nav.docs}</Link>
          <Link href={localize(locale, "/pricing")}>{dictionary.nav.pricing}</Link>
          <Link href={localize(locale, "/console")}>{dictionary.nav.console}</Link>
        </div>
      </footer>
    </div>
  );
}