import { ProBadge } from "@/components/plan-badges";
import { IS_PRO, VERSION } from "@/lib/env";
import { __, sprintf } from "@wordpress/i18n";
import { GitCompareArrows } from "lucide-react";
import TabNav from "./TabNav";

/**
 * Page header: plugin name, version and the tabs. Saving lives in the
 * sticky footer (SaveBar).
 */
const AppHeader = () => {
  const planLabel = IS_PRO
    ? __("Better Compare Pro", "product-comparison-for-woocommerce")
    : __("Better Compare", "product-comparison-for-woocommerce");

  return (
    <header className="ino:border-b ino:border-border ino:bg-background ino:px-8">
      <div className="ino:flex ino:flex-wrap ino:items-center ino:justify-between ino:gap-4 ino:pt-5 ino:pb-2">
        <div className="ino:flex ino:items-center ino:gap-3">
          <div className="ino:flex ino:size-9 ino:items-center ino:justify-center ino:rounded-lg ino:bg-foreground ino:text-background">
            <GitCompareArrows size={20} aria-hidden="true" />
          </div>
          <div>
            <h1 className="ino:m-0 ino:p-0 ino:text-xl ino:font-semibold ino:text-foreground">
              {__("Compare", "product-comparison-for-woocommerce")}
            </h1>
            <p className="ino:m-0 ino:flex ino:items-center ino:gap-1.5 ino:text-sm ino:text-muted-foreground">
              {sprintf(
                /* translators: 1: plugin name, 2: version number. */
                __("%1$s · %2$s", "product-comparison-for-woocommerce"),
                planLabel,
                VERSION,
              )}
              {IS_PRO && <ProBadge />}
            </p>
          </div>
        </div>
      </div>
      <TabNav />
    </header>
  );
};

export default AppHeader;