import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Platform } from 'react-native';
import { Minus, Plus } from 'lucide-react-native';
import Animated, { useAnimatedStyle, withTiming, withSequence } from 'react-native-reanimated';
import * as Haptics from 'expo-haptics';

interface QuantityControlProps {
  quantity: number;
  onIncrease: () => void;
  onDecrease: () => void;
}

const QuantityControl: React.FC<QuantityControlProps> = ({ 
  quantity, 
  onIncrease, 
  onDecrease 
}) => {
  const animatedTextStyle = useAnimatedStyle(() => {
    return {
      opacity: 1,
    };
  });

  const handleIncrease = () => {
    onIncrease();
    if (Platform.OS !== 'web') {
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    }
  };

  const handleDecrease = () => {
    if (quantity > 0) {
      onDecrease();
      if (Platform.OS !== 'web') {
        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
      }
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={[styles.button, { opacity: quantity <= 0 ? 0.5 : 1 }]}
        onPress={handleDecrease}
        disabled={quantity <= 0}
      >
        <Minus size={16} color={'#333333'} />
      </TouchableOpacity>
      
      <Animated.Text style={[styles.quantity, animatedTextStyle]}>
        {quantity}
      </Animated.Text>
      
      <TouchableOpacity style={styles.button} onPress={handleIncrease}>
        <Plus size={16} color={'#333333'} />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: 36,
  },
  button: {
    width: 36,
    height: 36,
    backgroundColor: '#E6D0B3',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 6,
  },
  quantity: {
    fontSize: 14,
    color: '#333333',
    paddingHorizontal: 16,
    minWidth: 40,
    textAlign: 'center',
  },
});

export default QuantityControl;