import { contrast } from "@/lib/contrast";
import { __, sprintf } from "@wordpress/i18n";

/**
 * Warns when a text colour on its background is under 4.5:1 (WCAG AA).
 * `pairs`: `[[label, foreground, background], …]`.
 */
const ContrastWarning = ({ pairs }) => {
  const failing = pairs
    .map(([label, fg, bg]) => [label, contrast(fg, bg)])
    .filter(([, ratio]) => ratio < 4.5);

  if (!failing.length) {
    return null;
  }

  const [label, ratio] = failing[0];

  return (
    <p
      role="alert"
      className="ino:my-3 ino:rounded-lg ino:border ino:border-amber-200 ino:bg-amber-50 ino:px-3 ino:py-2 ino:text-[13px] ino:text-amber-900"
    >
      {sprintf(
        /* translators: 1: what is low contrast, 2: ratio like 3.1 */
        __(
          "Low contrast: %1$s is %2$s:1. Aim for at least 4.5:1 so every shopper can read it.",
          "product-comparison-for-woocommerce",
        ),
        label.toLowerCase(),
        ratio.toFixed(1),
      )}
      {failing.length > 1 &&
        ` (${sprintf(
          /* translators: %d: number of other low-contrast pairs */
          __("%d more", "product-comparison-for-woocommerce"),
          failing.length - 1,
        )})`}
    </p>
  );
};

export default ContrastWarning;