import { ProBadge } from "@/components/plan-badges";
import { Button } from "@/components/ui/button";
import { IS_PRO, PRO_URL } from "@/lib/env";
import { __ } from "@wordpress/i18n";

/** Tools › License: Free explains Pro; Pro manages its key (Pro add-on). */
const LicenseCard = () => (
  <section
    className="ino:rounded-xl ino:border ino:border-border ino:bg-card ino:p-5"
    aria-labelledby="pcfw-license-h"
  >
    <div className="ino:mb-2 ino:flex ino:items-center ino:gap-2">
      <h2
        id="pcfw-license-h"
        className="ino:m-0 ino:text-base ino:font-semibold"
      >
        {__("License", "product-comparison-for-woocommerce")}
      </h2>
      <ProBadge />
    </div>
    {IS_PRO ? (
      <p className="ino:m-0 ino:text-[13px] ino:text-muted-foreground">
        {__(
          "Pro is active. Manage your license from the Pro add-on.",
          "product-comparison-for-woocommerce",
        )}
      </p>
    ) : (
      <>
        <p className="ino:mt-0 ino:mb-3 ino:text-[13px] ino:text-muted-foreground">
          {__(
            "You’re on Better Compare Free. Pro adds custom fields, spec groups, winner badges, SEO pages and more.",
            "product-comparison-for-woocommerce",
          )}
        </p>
        <Button render={<a href={PRO_URL} target="_blank" rel="noreferrer" />}>
          {__("See what Pro adds", "product-comparison-for-woocommerce")}
        </Button>
      </>
    )}
  </section>
);

export default LicenseCard;