Gishen-Mob/components/ui/QtyStepper.tsx

import { Ionicons } from "@expo/vector-icons";
import { Pressable, View } from "react-native";
import { Text } from "@/components/ui/Text";
import { colors, radii } from "@/lib/theme";

export function QtyStepper({
  value,
  onChange,
  min = 1,
  max = 99,
  size = "md",
}: {
  value: number;
  onChange: (n: number) => void;
  min?: number;
  max?: number;
  size?: "sm" | "md";
}) {
  const dim = size === "sm" ? 26 : 32;
  const iconSize = size === "sm" ? 14 : 17;

  const step = (delta: number) => {
    const next = Math.min(max, Math.max(min, value + delta));
    if (next !== value) onChange(next);
  };

  return (
    <View
      style={{
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: colors.surface,
        borderWidth: 1,
        borderColor: colors.line,
        borderRadius: radii.pill,
        padding: 3,
        gap: 2,
      }}
    >
      <Pressable
        accessibilityLabel="Decrease quantity"
        onPress={() => step(-1)}
        disabled={value <= min}
        style={{
          width: dim,
          height: dim,
          borderRadius: dim / 2,
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: colors.surfaceAlt,
        }}
      >
        <Ionicons
          name="remove"
          size={iconSize}
          color={value <= min ? colors.disabled : colors.ink}
        />
      </Pressable>
      <View style={{ minWidth: 30, alignItems: "center" }}>
        <Text variant="h3">{value}</Text>
      </View>
      <Pressable
        accessibilityLabel="Increase quantity"
        onPress={() => step(1)}
        disabled={value >= max}
        style={{
          width: dim,
          height: dim,
          borderRadius: dim / 2,
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: value >= max ? colors.surfaceAlt : colors.brand,
        }}
      >
        <Ionicons
          name="add"
          size={iconSize}
          color={value >= max ? colors.disabled : colors.ink}
        />
      </Pressable>
    </View>
  );
}