import { CrownIcon } from "@phosphor-icons/react";
import cn from "../utils/cn";
import isProActive from "../utils/isProActive";

// Inline "PRO" label for features that need the Pro version. Hidden for Pro users.
const ProBadge = ({ className }) => {
  if (isProActive()) return null;

  return (
    <span
      title="Available in Pro"
      className={cn(
        "ino:inline-flex ino:shrink-0 ino:items-center ino:gap-1 ino:rounded-full ino:bg-linear-to-r ino:from-amber-400 ino:to-orange-500 ino:px-2 ino:py-0.5 ino:text-[10px] ino:leading-none ino:font-bold ino:tracking-wider ino:text-white ino:uppercase ino:shadow-sm ino:select-none",
        className,
      )}
    >
      <CrownIcon size={11} weight="fill" />
      <span className="ino:mt-0.5">Pro</span>
    </span>
  );
};
export default ProBadge;