import {
  ArrowRightIcon,
  KeyIcon,
  WarningDiamondIcon,
} from "@phosphor-icons/react";

const LicenseActivationBanner = () => {
  if (!(CPBW.is_pro === "1" && CPBW.is_license_active !== "1")) {
    return null;
  }

  const activateUrl = `admin.php?page=cpbw-manage-license`;

  return (
    <div className="ino:mx-4 ino:mb-1 ino:rounded-lg ino:overflow-hidden ino:border ino:border-amber-300 ino:dark:border-amber-500/40 ino:bg-linear-to-r ino:from-amber-50 ino:to-orange-50 ino:dark:from-amber-950/60 ino:dark:to-orange-950/50 ino:shadow-sm">
      <div className="ino:flex ino:items-center ino:justify-between ino:gap-4 ino:px-3 ino:py-2">
        <div className="ino:flex ino:items-center ino:gap-3">
          <div className="ino:shrink-0 ino:bg-amber-100 ino:dark:bg-amber-500/20 ino:rounded-full ino:p-2">
            <WarningDiamondIcon
              size={18}
              weight="fill"
              className="ino:text-amber-500 ino:dark:text-amber-400"
            />
          </div>
          <div>
            <p className="ino:m-0! ino:text-base ino:font-bold ino:text-amber-900 ino:dark:text-amber-200 ino:leading-snug ino:tracking-tight">
              License Not Activated
            </p>
            <p className="ino:m-0! ino:text-sm ino:text-amber-700 ino:dark:text-amber-400 ino:mt-0.5 ino:leading-snug">
              Your Pro features are currently disabled. Activate your license to
              unlock all capabilities.
            </p>
          </div>
        </div>

        <a
          href={activateUrl}
          className="ino:shrink-0 ino:inline-flex ino:items-center ino:gap-2 ino:bg-amber-500 ino:hover:bg-amber-600 ino:text-white! ino:hover:text-white! ino:font-semibold ino:text-sm ino:h-9 ino:px-3.5 ino:rounded-md! ino:transition-colors ino:focus:shadow-none! ino:focus:text-white! ino:focus:outline-none! ino:duration-200 ino:outline-none! ino:shadow-none! ino:no-underline"
        >
          <KeyIcon size={15} weight="bold" />
          Activate License
          <ArrowRightIcon size={14} weight="bold" />
        </a>
      </div>
    </div>
  );
};

export default LicenseActivationBanner;