import TextSetting from "@/components/settings/TextSetting";
import { Textarea } from "@/components/ui/textarea";
import { useSetting } from "@/hooks/useSettings";
import { __ } from "@wordpress/i18n";

const NOTE = "ino:mb-0 ino:text-[13px] ino:text-muted-foreground";

/** Table behaviour › Table title and Table description. */
const TableHeadingSettings = () => {
  const [description, setDescription] = useSetting("table.description", "");

  return (
    <div className="ino:flex ino:flex-col ino:gap-4 ino:border-t ino:border-border/70 ino:py-4">
      <div>
        <TextSetting
          path="table.title"
          label={__("Table title", "product-comparison-for-woocommerce")}
          placeholder={__(
            "Compare products",
            "product-comparison-for-woocommerce",
          )}
        />
        <p className={`ino:mt-1.5 ${NOTE}`}>
          {__(
            "Shown at the top of the popup, and above tables in blocks and shortcodes. Empty uses “Compare products” in the popup only.",
            "product-comparison-for-woocommerce",
          )}
        </p>
      </div>
      <div className="ino:flex ino:flex-col ino:gap-1.5">
        <label
          htmlFor="pcfw-table-description"
          className="ino:text-[13px] ino:font-medium ino:text-foreground"
        >
          {__("Table description", "product-comparison-for-woocommerce")}
        </label>
        <Textarea
          id="pcfw-table-description"
          rows={2}
          maxLength={500}
          value={description ?? ""}
          placeholder={__(
            "e.g. Compare specs side by side. Pin a product to keep it in the first column.",
            "product-comparison-for-woocommerce",
          )}
          onChange={(event) => setDescription(event.target.value)}
        />
        <p className={`ino:mt-0 ${NOTE}`}>
          {__(
            "Optional intro text under the title, in the popup and above tables. Plain text, up to 500 characters.",
            "product-comparison-for-woocommerce",
          )}
        </p>
      </div>
    </div>
  );
};

export default TableHeadingSettings;