import { Button } from "@/components/ui/button";
import { useSetting } from "@/hooks/useSettings";
import { __, sprintf } from "@wordpress/i18n";
import { Minus, Plus } from "lucide-react";
import SettingRow from "./SettingRow";

/**
 * Whole-number setting with − / + buttons, kept between `min` and `max`.
 */
const StepperSetting = ({ path, title, description, min, max }) => {
  const [value, setValue] = useSetting(path, min);
  const id = `pcfw-${path.replace(/\./g, "-")}`;
  const change = (step) => setValue(Math.min(max, Math.max(min, value + step)));

  return (
    <SettingRow id={id} title={title} description={description}>
      <div
        role="group"
        aria-labelledby={id}
        className="ino:inline-flex ino:items-center ino:rounded-lg ino:border ino:border-border ino:bg-background"
      >
        <Button
          variant="ghost"
          size="icon"
          aria-label={__("Fewer", "product-comparison-for-woocommerce")}
          disabled={value <= min}
          onClick={() => change(-1)}
        >
          <Minus />
        </Button>
        <span
          aria-live="polite"
          aria-label={sprintf(
            /* translators: %d: number of products. */
            __("%d products", "product-comparison-for-woocommerce"),
            value,
          )}
          className="ino:w-10 ino:text-center ino:text-[15px] ino:font-semibold"
        >
          {value}
        </span>
        <Button
          variant="ghost"
          size="icon"
          aria-label={__("More", "product-comparison-for-woocommerce")}
          disabled={value >= max}
          onClick={() => change(1)}
        >
          <Plus />
        </Button>
      </div>
    </SettingRow>
  );
};

export default StepperSetting;