import { LockClosedIcon } from "@heroicons/react/24/solid";
import { useNavigate } from "react-router-dom";
import Button from "../../../../components/Button";
import isProActive from "../../../../utils/isProActive";

const PRO_PAGE_URL =
  "https://innocodia.com/plugins/woocommerce-product-badges-pro/?utm_source=first_time_use&utm_medium=free_plugin&utm_campaign=promotion";

const EmptyBadge = () => {
  const navigate = useNavigate();
  const isPro = isProActive();

  const navigateToProPage = () => {
    window.open(PRO_PAGE_URL, "_blank", "noopener,noreferrer");
  };

  return (
    <div className="wmx-px-6 wmx-py-12 wmx-flex wmx-justify-center wmx-rounded-lg wmx-border wmx-shadow-md wmx-border-gray-300 wmx-bg-white">
      <div className="wmx-max-w-[496px]">
        <p className="wmx-text-[22px] wmx-font-bold wmx-text-gray-900">
          No badges yet. Let&apos;s highlight your products.
        </p>
        <p className="wmx-text-base wmx-mt-1 wmx-font-medium wmx-max-w-96 wmx-text-gray-500">
          Create badges to showcase discounts, bestsellers, low stock and more - or unlock smart badges to automate
          everything for you.
        </p>

        <div className="wmx-flex wmx-gap-4 wmx-mt-4">
          <Button onClick={() => navigate("editor")}>Create Your First Badge</Button>
          {!isPro ? (
            <Button
              className="wmx-bg-white wmx-text-primary hover:wmx-text-white hover:wmx-bg-primary wmx-font-bold wmx-border wmx-border-primary hover:wmx-border-primary"
              onClick={navigateToProPage}
            >
              <LockClosedIcon className="wmx-size-4" />
              Unlock Smart Badge
            </Button>
          ) : null}
        </div>
      </div>
    </div>
  );
};
export default EmptyBadge;
