Necesito mejorar el siguiente modal, ahora tambien quiero darle manejo al priceWholesale donde se pueda seleccionar una cantidad del producto, donde al ir aumentando la cantidad el precio puede dismuir con  porcentaje del 3 al 15%, Precio antes del envío ejemplo,
2 - 49 piezas
$8.80
50 - 999 piezas
$7.80
>= 1000 piezas
$7.00, tambien el manejo de variaciones, import React, { useState, useEffect } from 'react';
import { Modal, View, Text, Image, TouchableOpacity, Button, StyleSheet } from 'react-native';

const ProductDetailModal = ({ product, visible, onClose, addToCart }) => {
  const [quantity, setQuantity] = useState(1);

  useEffect(() => {
    if (visible) {
      setQuantity(1); // Reset the quantity to 1 when the modal becomes visible
    }
  }, [visible]);

  const handleQuantityChange = (action) => {
    if (action === 'increase') {
      setQuantity(quantity + 1);
    } else if (action === 'decrease' && quantity > 1) {
      setQuantity(quantity - 1);
    }
  };

  const handleAddToCart = () => {
    if (!product || !product._id) {
      console.error('Attempted to add a product without a valid id:', product);
      return;
    }
    addToCart(product, quantity);
    onClose();
  };

  if (!product) {
    return null;
  }

  return (
    <Modal visible={visible} animationType="slide" transparent={true}>
      <View style={styles.modalView}>
        <TouchableOpacity style={styles.closeButton} onPress={onClose}>
          <Text style={styles.closeButtonText}>X</Text>
        </TouchableOpacity>
        <Image source={{ uri: product.image || 'https://via.placeholder.com/150' }} style={styles.productImage} />
        <Text style={styles.productName}>{product.name}</Text>
        <View style={styles.priceContainer}>
          <Text style={styles.currentPrice}>${product.price}</Text>
          {product.originalPrice && (
            <Text style={styles.originalPrice}>${product.originalPrice}</Text>
          )}
        </View>
        {product.discountPercentage && (
          <Text style={styles.discountPercentage}>{product.discountPercentage}% off</Text>
        )}
        <View style={styles.quantityContainer}>
          <TouchableOpacity style={styles.quantityButton} onPress={() => handleQuantityChange('decrease')}>
            <Text style={styles.quantityButtonText}>-</Text>
          </TouchableOpacity>
          <Text style={styles.quantity}>{quantity}</Text>
          <TouchableOpacity style={styles.quantityButton} onPress={() => handleQuantityChange('increase')}>
            <Text style={styles.quantityButtonText}>+</Text>
          </TouchableOpacity>
        </View>
        <TouchableOpacity style={styles.addToCartButton} onPress={handleAddToCart}>
          <Text style={styles.addToCartButtonText}>Add to Cart</Text>
        </TouchableOpacity>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 20,
    backgroundColor: "white",
    borderRadius: 10,
    padding: 20,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  closeButton: {
    position: 'absolute',
    top: 10,
    right: 10,
  },
  closeButtonText: {
    fontSize: 24,
    color: 'green',
  },
  productImage: {
    width: 200,
    height: 200,
    borderRadius: 10,
    marginBottom: 15,
  },
  productName: {
    fontSize: 22,
    fontWeight: 'bold',
    color: 'green',
    marginBottom: 10,
  },
  priceContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  currentPrice: {
    fontSize: 18,
    color: 'green',
    fontWeight: 'bold',
  },
  originalPrice: {
    fontSize: 16,
    color: 'grey',
    textDecorationLine: 'line-through',
    marginLeft: 10,
  },
  discountPercentage: {
    fontSize: 16,
    color: 'red',
    marginBottom: 15,
  },
  quantityContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  quantityButton: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'green',
    borderRadius: 20,
    marginHorizontal: 10,
  },
  quantityButtonText: {
    fontSize: 24,
    color: 'white',
  },
  quantity: {
    fontSize: 18,
    color: 'green',
    fontWeight: 'bold',
  },
  addToCartButton: {
    backgroundColor: 'green',
    borderRadius: 10,
    paddingVertical: 10,
    paddingHorizontal: 20,
    alignItems: 'center',
  },
  addToCartButtonText: {
    fontSize: 18,
    color: 'white',
    fontWeight: 'bold',
  },
});

export default ProductDetailModal;