import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { QuantitySelectorProps } from './quantitySelector.props';
import { getStyles } from './quantitySelector.styles';
import { useAppTheme } from '@theme';

export const QuantitySelector: React.FC<QuantitySelectorProps> = ({
  value,
  onIncrement,
  onDecrement,
  min = 0,
  max = 99,
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={[styles.button, value <= min && styles.buttonDisabled]}
        onPress={onDecrement}
        disabled={value <= min}
        activeOpacity={0.7}
      >
        <Text style={styles.buttonText}>-</Text>
      </TouchableOpacity>
      <Text style={styles.value}>{value}</Text>
      <TouchableOpacity
        style={[styles.button, value >= max && styles.buttonDisabled]}
        onPress={onIncrement}
        disabled={value >= max}
        activeOpacity={0.7}
      >
        <Text style={styles.buttonText}>+</Text>
      </TouchableOpacity>
    </View>
  );
};