import BaseWarning from "@/components/settings/ContrastWarning";
import { useAppSelector } from "@/store";
import { selectDesignDraft } from "@/store/slices/designSlice";
import { __ } from "@wordpress/i18n";

/** Contrast checks for the Compare button and the bar. */
const ContrastWarning = () => {
  const { button: b, bar } = useAppSelector(selectDesignDraft);

  return (
    <BaseWarning
      pairs={[
        [
          __(
            "Button text on its background",
            "product-comparison-for-woocommerce",
          ),
          b.text,
          b.bg,
        ],
        [
          __(
            "Hover text on its background",
            "product-comparison-for-woocommerce",
          ),
          b.hover_text,
          b.hover_bg,
        ],
        [
          __(
            "Added text on its background",
            "product-comparison-for-woocommerce",
          ),
          b.added_text,
          b.added_bg,
        ],
        [
          __("Bar text on the bar", "product-comparison-for-woocommerce"),
          bar.text,
          bar.bg,
        ],
        [
          __("Bar button text", "product-comparison-for-woocommerce"),
          bar.button_text,
          bar.button_bg,
        ],
      ]}
    />
  );
};

export default ContrastWarning;