import { ProBadge } from "@/components/plan-badges";
import { useDesign } from "@/hooks/useSettings";
import { IS_PRO } from "@/lib/env";
import { __ } from "@wordpress/i18n";

/** Custom CSS (Pro): locked textarea in Free. */
const CustomCss = () => {
  const [css, setCss] = useDesign("custom_css", "");

  return (
    <div className="ino:flex ino:flex-col ino:gap-1.5 ino:border-t ino:border-border/70 ino:py-4">
      <label
        htmlFor="pcfw-custom-css"
        className="ino:flex ino:items-center ino:gap-2 ino:text-sm ino:font-medium"
      >
        {__("Custom CSS", "product-comparison-for-woocommerce")}
        <ProBadge />
      </label>
      <textarea
        id="pcfw-custom-css"
        rows={4}
        disabled={!IS_PRO}
        value={css}
        placeholder=".pcfw-table { … }"
        onChange={(event) => setCss(event.target.value)}
        className="ino:rounded-md ino:border ino:border-input ino:bg-transparent ino:px-3 ino:py-2 ino:font-mono ino:text-[13px] ino:disabled:cursor-not-allowed ino:disabled:opacity-55"
      />
    </div>
  );
};

export default CustomCss;